Question

EmberJS版本1.11.3

我有一个按钮，按下后，向我的服务器发送一个Ajax查询并返回一些数据。我想每次用新数据刷新此按钮下的视图。

这是简化的车把模板：

<script type="text/x-handlebars" data-template-name='query'>
    <form class="form-vertical" {{action "sendQuery" model}}>
        <div class="control-group">
            {{input value=this.totoQuery type="text" placeholder="Enter an SQL query...."}}
        </div>
        <button type="submit" class="btn">Send ! </button>
    </form>
</script>

这是该模板的控制器：

App.QueryController = Ember.Controller.extend({
    totoQuery: '',
    actions: {
        sendQuery: function(model, route) {
            var promise = asyncAjax(queryservice + '?query=' + this.totoQuery);
            promise.success(function(data) {
                model=data.entries;
            })
        }
    }
})

Ajax调用工作正常，路由中也定义了模型（我使用虚拟模型测试）。但是，当我尝试使用：

更新模型时

model=data.entries; //The template does not update with it!!! The template still displays the data from the dummy model.

我无法使用this.set（'model'，data）修改它，因为“Undefined function !! this.set”.. 我的假模特：

App.QueryRoute = Ember.Route.extend({
    model: function() {
        return [{
            'title': 'A book title like Harry Potter of Fifty Sha... nvm.. '
        }];
    }
});

非常感谢任何建议!!!

PS：我在这方面花了太多时间:(

Answer 1

您可以通过以下方式获取控制器操作中的模型：

 sendQuery: function() {
        var self = this,
            totoQuery = this.get('totoQuery');
        var promise = asyncAjax(queryservice + '?query=' + totoQuery);
        promise.done(function(data) {
            $.each(data.entries, function (index, entry){
              self.get('model').pushObject(entry);
            });
        })
    }

并且您不需要将模型作为参数传递。你可以这样做：

  <form class="form-vertical" {{action "sendQuery"}}>

控制器自动继承model属性。有一点是，使用this.totoQuery获取模型属性将在Ember中弃用。而是使用model.totoQuery。

Answer 2

如果你挣扎太多，你也可以直接从路径中从你的控制器而不是模型渲染一些东西，这样你就可以从控制器更新变量，并且很容易改变。

App.QueryController = Ember.Controller.extend({
    queryResponse: [],
    totoQuery: '',
    actions: {
        sendQuery: function(model, route) {
            var self = this;
            var promise = asyncAjax(queryservice + '?query=' + this.totoQuery);
            promise.success(function(data) {
            //model=data.entries;
            self.set('queryResponse', data.entries);
        })
    }
})

在您的模板中，您可以直接呈现

<ul>
{{#each item in controller.queryResponse}}
    <li>item.name</li>
{{/each}}
</ul>

EmberJS：如何动态重新加载模型和模板（在动作之后，按下'按钮'）

2 个答案: