Ember 2.0 如何使模板和路由相互对话？

Question

我正在自学 Ember-cli，并尝试构建一个简单的应用程序，当用户搜索一个词时它会获取结果。我得到了 ajax 结果就好了，但我不确定如何将它“传递”给模板

这是我现在的 hbs 代码 /app/templates/product-search.hbs:

搜索栏工作得很好。

<p>*Is 'xyz' by deafult. </p>
{{input class="form-control" id="search-string" type="text" value=this.search-string placeholder="Search by Product"}}
<button type="button" {{action "searchByProduct" this.search-string}}>Lookup Product</button>

<ul>

    {{#each result as |item|}}
        <li>Product Name: {{item.prodName}}</li>
    {{else}}
            Sorry, nobody is here.
    {{/each}}
</ul>

这是路由文件：/app/routes/product-search.js

import Ember from 'ember';

export default Ember.Route.extend({  
    actions: {
        searchByProduct:  function(qString) {
            var term = qString || 'xyz';
            var fetchURL = 'http://some-api.com/search?callback=JSON_CALLBACK&limit=10&term='+term;
            var result = Ember.Object.create({

            });
            return $.ajax({
              url: fetchURL,
              dataType: 'jsonp'
            }).then(function (response) {
                result.set('content', response.results);
                result = result.get('content');
                console.log("Search Result In Then Promise of Model: ");
                console.log(result); //I get an array of objects (screenshot included)
                return result; 
            });
        }
    }
});

控制台操作：

单个对象如下所示：

0: Object
productId: 471744
productName: "xyz"
productViewUrl: "https://someapi.com/us/product/xyz/id471744?uo=4"
imageUrl30: "http://.../source/30x30bb.jpg"
imageUrl60: "http://.../source/60x60bb.jpg"
imageUrl100: "http://.../source/100x100bb.jpg"
collectionId: 700049951
collectionName: "XYZ Collection"
collectionPrice: 9.99
country: "USA"
currency: "USD"
wrapperType: "track"
......
__proto__: Object

所以我确实在我的 result 对象中看到了结果，但我仍然无法在我的模板中显示它。也许没有循环正确的对象？还是我需要传递其他东西？我不知道缺少什么。感谢您提供任何帮助，我已经坚持了几个小时了。

Answer 1

1) 你路由model钩子必须返回承诺。

分解代码中发生的事情：

export default Ember.Route.extend({
    model: function(params){
        var result = [];              // Create an array
        $.ajax({                      // Start an AJAX request...
          success: function(response){
            result.set('content', response.results);
           }
        });                           // ...but discard the promise
        console.log(result);          // log the array (still empty)
        return result;                // return the array (still empty)
    }
});                                   // much later, the AJAX call completes but
                                      // Ember does not care.

Ember 得到一个空数组。由于它不是promise，它假设它可以立即使用它，因此将它设置为model并立即渲染模板。

修复它：

export default Ember.Route.extend({
    model: function(params){
        var term = 'random';
        var fetchURL = 'http://some-api.com/search?callback=JSON_CALLBACK&limit=10&term='+term;
        return $.ajax({
          url: fetchURL,
          dataType: 'jsonp'
        }).then(function (data) {
            return data.results;   // do whatever processing you have to do
        });
    }
});

这样，您直接将承诺返回给 Ember。看到这一点，Ember 知道它必须等待 promise 解决。当 AJAX 调用成功时，数据被传递给 then 处理程序，该处理程序返回要使用的实际数据。反过来，Ember 获取该数据并将其设置为供模板使用。

您绝对应该阅读一下promises。 （请注意，jQuery 的“承诺”不是标准的）。

顺便说一句，我看到你正在加载ember-data。您绝对应该使用它而不是 $.ajax 来加载资源。这就是它的用途，它在将数据模型简化到您的 Ember 工作流程中做得更好。

2)除非你覆盖它，否则model钩子返回的数据将在模板中命名为model。

因此，只需在模板中将 results 替换为 model 即可：{{#each model as |item|}}