检测数据存储区中记录的更改

时间:2011-09-09 11:07:04

标签: javascript sproutcore

我在模板视图中嵌入了一个大svg。所有svg元素的id都与sproutcore数据存储区中的guid记录相对应。 现在我在每条记录上都有一个'选定'的布尔值。

每当'selected'属性在True和False之间切换时,我想调整记录的相应svg元素。视图应反映记录的选定属性的更改。

我无法弄清楚如何设置绑定/观察来做到这一点。如果我用sc为每条记录构建svg,我知道如何设置绑定。但是当你已经有svg时,我不知道如何构建绑定。

型号代码:

App.Node = SC.Record.extend(
   name : SC.Record.attr(String),
   value : SC.Record.attr(String),
   selected: SC.Record.attr(Boolean),
}),

查看代码:

App.svg_picture = SC.View.design({

  childViews: 'svgpicture'.w(),

   layout: { left:12, right:12, top:12, bottom:12},

   svgpicture: SC.TemplateView.create({
   /**
   * settings.
   */
   templateName: 'svgtest2',
   nodeBorderColorSel: '#FFB60B',
   nodeColorSel: 'yellow',

   /**
    * Event handling code.
    */
   ....

svg.handlebar示例:

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="manifold" xmlns:xlink="http://www.w3.org/1999/xlink"  >
tank_1</text>
<circle cy="25" cx="70" r="20" id="tank_1"  strokewidth:5; fill:none; "  />

<circle cy="25" cx="120" r="20" id="tank_10" strokewidth:5; fill:none; "  />
<circle cy="25" cx="170" r="20" id="tank_11" strokewidth:5; fill:none; "  />
... etc...

1 个答案:

答案 0 :(得分:0)

对我来说有用的是自己为对象添加观察者。

 node.addObserver('selected', this, 'update_node_selected');

节点是一个记录。现在我手动在所选属性上添加一个观察者,执行'update_node_selected'功能。获取目标参数,该参数是对象,在我的情况下是记录。