Home/ Questions/Q 8616009
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T05:31:07+00:00

I try to bind a array from another array’s change. but it not work.

  • 0

I try to bind a array from another array’s change. but it not work.

The test.js code like this:

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

The html code like this:

<!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>

then, If you type “04 05 06” into the text field, except that table will be 6*6， but now it is not. like that compareItems is a new one every time, but the table use the old one when the items changed. how to solve this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think you should use array proxy…

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

    An ArrayProxy wraps any other object that implements Ember.Array and/or Ember.MutableArray, forwarding all requests. This makes it very useful for a number of binding use cases or other cases where being able to swap out the underlying array is useful.

    A simple example of usage:

    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'
    • 0