1

我尝试从另一个数组的更改中绑定一个数组。但它不起作用。

test.js 代码如下：

var App = Em.Application.create();

Item = Ember.Object.extend({
    name: null
});

CompareItem = Ember.Object.extend({
    i: null,
    j: null
});

Row = Ember.Object.extend({
    title: null,
    tds: []
});

// see emberjs.com/documention "changes in arrays"
App.Items = Ember.Object.create({
    items: [
    Item.create({name: "01"})
    ,Item.create({name: "02"})
    ,Item.create({name: "03"})
    ],
    compareItems: function() {
    var tdItems = [];
    var items = this.get('items');
    items.forEach(function(left, i, lself) {
        var cprItems = [];
        items.forEach(function(right, j, rself) {
        var compareItem = null;
        compareItem = CompareItem.create({
            i: i,
            j: j
        });
        cprItems[j] = compareItem;
        });
        var row = Row.create({
        title: "["+i+"]",
        tds: cprItems
        });
        tdItems[i] = row;
    });
    return tdItems;
    }.property('items.@each')
});

App.Input = Em.TextField.extend({
    change: function(evt){
    var items = this.value.split(" ");
    items.forEach(function(item, index, all) {
        if ($.trim(item)!=""){
        var it = Item.create({name: item});   
        App.Items.get("items").pushObject(it);
        }
    });
    }
});

App.Table = Em.View.extend({
    templateName: 'bsc-table',
    items: App.Items.get("items")
});

App.EditTr = Em.View.extend({
    compareItems: App.Items.get("compareItems")
});

App.EditTh = Em.View.extend({
});

App.EditTd = Em.View.extend({
});
// Em.run.sync();
var bsctable = App.Table.create();
bsctable.app

html代码如下：

<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]--> <!--[if IE 7 ]>    <html lang="en" class="ie7"> <![endif]--> <!--[if IE 8 ]>    <html lang="en" class="ie8"> <![endif]--> <!--[if IE 9 ]>    <html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title></title>
  <meta name="description" content="">
  <meta name="author" content="">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="stylesheet" href="css/style.css?v=2">
  <style type="text/css">
  .border-table {
  border: 1px solid #960; border-collapse: collapse;
  }
  .border-table th,td {
  border: 1px solid #960; border-collapse: collapse; padding: 5px;
  }
  .txtInput {width:50px;}
  </style>

  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  <script type="text/x-handlebars" data-template-name="bsc-table">
    <table class="border-table">
      <thead>
    <tr>
      <th>items</th>
      {{#each items}}
      <th>
        {{name}}
      </th>
      {{/each}}
    </tr>
      </thead>
      <tbody>
    {{#view App.EditTr}}
    {{#each compareItems}}
    <tr>
      {{#view App.EditTh itemTrBinding="this"}}
      <th>
        [{{itemTr.title}}]
      </th>
      {{#each itemTr.tds}}
      {{#view App.EditTd itemTdBinding="this"}}
      <td>
        [{{itemTd.i}}]
        [{{itemTd.j}}]
      </td>
      {{/view}}
      {{/each}}
      {{/view}}
    </tr>
    {{/each}}
    {{/view}}
      </tbody>
    </table>
  </script>
</head>
<body>
  <script type="text/x-handlebars">
    {{#view App.Input}}{{/view}}
  </script>

  <script src="js/libs/jquery-1.7.2.min.js"></script>
  <script src="js/libs/ember-0.9.8.1.min.js"></script>
  <script src="js/test.js"></script>
</body>
</html>

那么，如果你在文本字段中输入“04 05 06”，除了表格将是 6*6，但现在不是。像这样 compareItems 每次都是新的，但是当项目发生变化时，表格使用旧的。如何解决这个问题？

4

1 回答 1

4

我认为您应该使用数组代理...

http://docs.emberjs.com/symbols/Ember.ArrayProxy.html

ArrayProxy 包装任何其他实现 Ember.Array 和/或 Ember.MutableArray 的对象，转发所有请求。这使得它对于许多绑定用例或能够交换底层数组有用的其他情况非常有用。

一个简单的用法示例：

var pets = ['dog', 'cat', 'fish'];
var ap = Ember.ArrayProxy.create({ content: Ember.A(pets) });
ap.get('firstObject'); // => 'dog'
ap.set('content', ['amoeba', 'paramecium']);
ap.get('firstObject'); // => 'amoeba'
于 2012-10-02T22:10:33.120 回答