Question

我正在教自己Ember-cli并且正在尝试构建一个简单的应用程序，该应用程序在用户搜索术语时获取结果。我得到的ajax结果很好，但我不确定如何通过＆＃34;那到模板

这是我的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; 
            });
        }
    }
});

控制台o / p：

并且单个对象如下所示：

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得到一个空数组。由于它不是承诺，它假定它可以立即使用它，因此它将其设置为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知道它必须等待承诺解决。当AJAX调用成功时，数据将传递给then处理程序，该处理程序返回要使用的实际数据。反过来，Ember获取该数据并将其设置为供模板使用。

你一定要读一下promises。（请注意，jQuery的“承诺”不是标准的）。

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

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

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

Ember 2.0如何进行模板和路由交流？

1 个答案: