使用 ember.js 为非动态路由重新加载模型的正确方法是什么? [英] What is the right approach to reload the model for a non-dynamic route with ember.js?

查看：23
本文介绍了使用 ember.js 为非动态路由重新加载模型的正确方法是什么?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

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

按照 ember 文档，通过使用transitionTo"，既不会为非动态路由调用 model 钩子和 setupController-Hook.

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

app.js

//应用初始化App = Ember.Application.create();//路线App.Router.map(function() {this.resource('东西', function() {this.route('添加');})});App.IndexRoute = Ember.Route.extend({重定向:函数(){this.transitionTo('东西');}});App.ThingsRoute = Ember.Route.extend({模型:函数(参数){返回 App.Thing.findAll();},});App.ThingsAddRoute = Em.Route.extend({设置控制器:功能(控制器){controller.set('content', App.Thing.create());}});//楷模App.Thing = Ember.Object.extend({名称:空，描述:空});App.Thing.reopenClass({查找全部:函数(){变量结果；$.ajax({url : 'http://path/app_dev.php/api/things',数据类型:'json'，异步:假，成功:功能(数据){结果 = data.things;}});返回结果；},保存:功能(内容){控制台日志(内容)；$.ajax({类型:'帖子'，url : 'http://path/app_dev.php/api/things',数据 : {名称:内容名称，描述:内容.描述},异步:假});}});//控制器App.ThingsAddController = Em.ObjectController.extend({添加:函数(){App.Thing.save(this.content);this.transitionToRoute('东西');},取消添加:函数(){this.transitionToRoute('东西');}});

index.html

<script type="text/x-handlebars" data-template-name="things/add"><div class="span12"><form class="form-horizo​​ntal"><字段集><div id="图例"><legend class="">添加新内容</legend>

<!-- 名称--><div class="control-group"><label class="control-label" for="name">Name</label><div class="控件">{{view Ember.TextField id="name" placeholder="输入姓名" valueBinding="name"}}

<!-- 说明--><div class="control-group"><label class="control-label" for="description">Description</label><div class="控件">{{view Ember.TextArea id="description" placeholder="输入描述" valueBinding="description"}}

<!-- 提交--><div class="control-group"><div class="控件"><button class="btn btn-success" {{action add}}>保存</button><button class="btn" {{action cancelAdding}}>Cancel</button>

</fieldset></表单>

<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>添加新事物{{/linkTo}}

{{出口}}<div class="span12"><table cellpadding="0" cellspacing="0" border="0" class="table table-striped"><头><tr><th>ID</th><th>姓名</th><第>描述</tr></thead>{{#模型中的每一项}}<tr><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.description}}</td></tr>{{/每个}}</tbody>

解决方案

因此，如果您使用的是 ember-data，则保存记录的副作用是 findAll() 的结果会得到更新.您可以通过手动更新数组或在添加新记录时触发刷新来完成相同的操作.无论哪种情况，都建议从 ThingsAddController 的 add fx 中执行此操作.例如:

App.ThingsAddController = Em.ObjectController.extend({需要:[东西]，添加:函数(){newThing = App.Thing.save(this.content);this.get('controllers.things').pushObject(newThing);this.transitionToRoute('东西');},});

I'm having a simple array of models which I display in a list (path: /things). The models get loaded from a REST-API.

In a nested route I have the functionality to add a new model. (path: /things/add). The new model is persisted over a REST-API.

After adding the new model, I do a transitionTo('things') to get back to the list.

Following the ember documentation, by using "transitionTo" neither the model hook nor the setupController-Hook are called for non dynamic routes.

What is the right approach to refresh the model on a non-dynamic route, when using transitionTo? Or: what is the best way to reload a model on a non-dynamic route without using 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>

解决方案

So if you were using ember-data, a side effect of saving the record would be that the results of findAll() get updated. You can accomplish the same by either manually updating the array or triggering a refresh when a new record is added. In either case, suggest doing that from ThingsAddController's add fx. For example:

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

这篇关于使用 ember.js 为非动态路由重新加载模型的正确方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆