用ember.js重新加载非动态路由模型的正确方法是什么?

What is the right approach to reload the model for a non-dynamic route with ember.js?

本文关键字:模型 路由 是什么 方法 动态 js ember 新加载 加载      更新时间:2023-09-26

我有一个简单的模型数组,我在列表中显示(路径:/things)。模型从REST-API加载。

在嵌套路由中,我有添加新模型的功能。(路径://添加)。新模型通过REST-API持久化。

添加新模型后,我执行transitionTo('things')以返回列表。

在ember文档之后,通过使用"transitionTo", model钩子和setupController钩子都不会被非动态路由调用。

当使用transitionTo时,在非动态路由上刷新模型的正确方法是什么?或者:在不使用transitionTo的情况下,在非动态路由上重新加载模型的最佳方法是什么?

app.js

// App Init
App = Ember.Application.create();
// Routes
App.Router.map(function() {
    this.resource('things', function() {
        this.route('add');
    })
});
App.IndexRoute = Ember.Route.extend({
    redirect : function() {
        this.transitionTo('things');
    }
});
App.ThingsRoute = Ember.Route.extend({
    model : function(param) {
        return App.Thing.findAll();
    },
});
App.ThingsAddRoute = Em.Route.extend({
    setupController : function(controller) {
        controller.set('content', App.Thing.create());
    }
});
// Models
App.Thing = Ember.Object.extend({
    name : null,
    description : null
});
App.Thing.reopenClass({
    findAll : function() {
        var result;
        $.ajax({
            url : 'http://path/app_dev.php/api/things',
            dataType : 'json',
            async : false,
            success : function(data) {
                result = data.things;
            }
        });
        return result;
    },
    save : function(content) {
        console.log(content);
        $.ajax({
            type : 'post',
            url : 'http://path/app_dev.php/api/things',
            data : {
                name : content.name,
                description : content.description
            },
            async : false
        });
    }
});
// Controller
App.ThingsAddController = Em.ObjectController.extend({
    add : function() {
        App.Thing.save(this.content);
        this.transitionToRoute('things');
    },
    cancelAdding : function() {
        this.transitionToRoute('things');
    }
});

index . html

<script type="text/x-handlebars">
<div class="container">
    <div class="row">
        <div class="span12">
            <h1>List of things</h1>
        </div>
        {{outlet}}
    </div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="things/add">
<div class="span12">
        <form class="form-horizontal">
        <fieldset>
            <div id="legend">
                <legend class="">Add new thing</legend>
            </div>
            <!-- Name -->
            <div class="control-group">
                <label class="control-label" for="name">Name</label>
                <div class="controls">
                    {{view Ember.TextField id="name" placeholder="Enter Name" valueBinding="name"}}
                </div>
            </div>
            <!-- Description -->
            <div class="control-group">
                <label class="control-label" for="description">Description</label>
                <div class="controls">
                    {{view Ember.TextArea id="description" placeholder="Enter description" valueBinding="description"}}
                </div>
            </div>
            <!-- Submit -->
            <div class="control-group">
                <div class="controls">
                    <button class="btn btn-success" {{action add}}>Save</button>
                    <button class="btn" {{action cancelAdding}}>Cancel</button>
                </div>
            </div>
        </fieldset>
        </form>
</div>
</script>    
<script type="text/x-handlebars" data-template-name="things">
<div class="span12">
    <div class="btn-toolbar">
        <div class="btn-group">
            {{#linkTo things.add}}<i class="icon-plus"></i> add new thing{{/linkTo}}
        </div>
    </div>
</div>
{{outlet}}  
<div class="span12">
    <table cellpadding="0" cellspacing="0" border="0" class="table table-striped ">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Description</th>
            </tr>
        </thead>
        <tbody>
        {{#each item in model}}
            <tr>
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.description}}</td>
            </tr>
        {{/each}}
        </tbody>
    </table>
</div>
</script>

因此,如果使用ember-data,保存记录的副作用将是更新findAll()的结果。您可以通过手动更新数组或在添加新记录时触发刷新来完成相同的操作。在任何一种情况下,建议从ThingsAddController的add fx。例如:

App.ThingsAddController = Em.ObjectController.extend({
  needs: [things],
  add : function() {
    newThing = App.Thing.save(this.content);
    this.get('controllers.things').pushObject(newThing);
    this.transitionToRoute('things');
  },
});