检测数据存储中记录的更改
我在模板视图中嵌入了一个大的 svg。所有 svg 元素都有与 sproutcore 数据存储中记录的 guid 相对应的 id。 现在我在每条记录上都有一个“选定的”布尔属性。
每当“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...
I have embedded a big svg in a template view. All svg elements have id's corresponding to guid's of records in a sproutcore datastore.
Now I have a 'selected' boolean porperty on each record.
I want to adjust the corresponding svg element of a record whenever the 'selected' property toggles between True and False. The view should reflect changes to the slected property of a record.
I can't figure out how to set up the bindings/observes to do this. If i would built the svg with sc for each record myself i know how to set up the bindings. But I don't know how to build bindings when you already have a svg.
model code:
App.Node = SC.Record.extend(
name : SC.Record.attr(String),
value : SC.Record.attr(String),
selected: SC.Record.attr(Boolean),
}),
view code:
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 example:
<?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...
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
对我有用的是我自己给对象添加观察者。
节点是一个记录。现在我在所选属性上手动添加一个观察者，并对此执行“update_node_selected”函数。它获取一个目标参数，该参数是对象，在我的例子中是一条记录。
What worked for me was adding observers to objects myself.
node is a Record. now I manually add an observer on the selected property executing 'update_node_selected' function on this. which gets a target parameter which is the object and in my case a record.