Question

我想使用相同view的许多实例来显示来自不同来源的相同类型的数据（只需记录器检查一些距离应用实例），我创建了包含空logs数组的简单视图使用AJAX（示例代码中的虚拟for循环）获取数据的方法。不幸的是logs属性在实例之间共享，所以每个视图都显示所有其他实例的项目，为什么呢？为什么它们没有封装到当前实例？

有一个JsFiddle显示我的问题：http://jsfiddle.net/biesior/wYGLT/

还有它的代码：

HTML：

<div id="main"></div>

<script type="text/x-handlebars">
    ellou' Logger
    {{#view App.SomeLogger id="logger1"}}{{/view}} <br>
    {{#view App.SomeLogger id="logger2"}}{{/view}} <br>
    {{#view App.SomeLogger id="logger3"}}{{/view}} <br>
</script>

<script type="text/x-handlebars" data-template-name="logger-template">
    <h1>ID: {{view.elementId}}</h1>
    <ul>
      {{#each log in view.logs}}
        <li>{{log.txt}}</li>
      {{/each}}
    <ul>
</script>

<script>
App = Ember.Application.create({ rootElement: "#main"});
App.SomeLogger = Ember.View.extend({
    layoutName: 'logger-template',
    logs: [],
    init: function () {
        this._super();
        var inst = this;
        setTimeout(function(){ inst.readLogs() }, 500);
    }, 
    readLogs: function(){
        var inst = this;
        var logs = inst.get("logs");
        for (var i = 1; i <= 3; i++) {
            logs.pushObject({txt: 'Log no.: ' + i + " in: " + inst.get("elementId")});
        }
    }

});
</script>

Answer 1

这是因为您在SomeLogger类中声明了一个共享数组实例。您需要在init内创建它，因此创建的每个新SomeLogger都将拥有您自己的logs数组。

App.SomeLogger = Ember.View.extend({
    layoutName: 'logger-template',
    logs: null,
    init: function () {
        this._super();
        this.set('logs', []); // each new SomeLogger created will have your own array
        var inst = this;
        setTimeout(function(){ inst.readLogs() }, 500);
    }, 
    readLogs: function(){
        var inst = this;
        var logs = inst.get("logs");
        for (var i = 1; i <= 3; i++) {
            logs.pushObject({txt: 'Log no.: ' + i + " in: " + inst.get("elementId")});
        }
    }

});

这是更新的小提琴http://jsfiddle.net/marciojunior/RrKzh/

Ember有许多相同视图和pushObject方法的实例

1 个答案: