1

我想使用许多相同的实例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>
4

1 回答 1

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/

于 2013-10-22T11:11:42.297 回答