Question

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

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每次都是新的一样，但是当项目发生变化时，表格会使用旧表格。怎么解决这个？

Answer 1

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

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'

emberjs数组绑定不自动更新

1 个答案: