1

我在 Backbone 中动态生成了 this.ui 元素：

var View = Backbone.View.extend({
el : '[data-container]',
ui : {
//Needs to be dynamically generated
},

到目前为止，我是这样做的：

this.ui.protocolSetter = new $.fn.init("#protocol-" + id);

效果很好。现在的问题是如何使用自定义属性来做同样的事情。

如果我有这个带有数据属性的 HTML5： button data-something="1" type="button" ...

我想动态绑定元素但使用自定义属性。

到目前为止，我已经尝试了许多组合，包括以下变化：

this.ui.protocolSetter = new $.fn.init.(e.currentTarget.dataset.something);

和

this.ui.protocolSetter = new $.fn.init.find("[data-something='" + id + "']");

但到目前为止，一切似乎都没有奏效。我做错了什么？

这是小提琴来更清楚地说明问题：

jsfiddle.net/vA2N4

4

1 回答 1

2

也许您正在寻找更像这样的东西：

newBinder: function(e) {
    var id = e.currentTarget.id.replace(/^btn-/, '');
    this.ui.protector = this.$('[data-something=' + id + ']');
}

请注意，我切换到replace从 中提取数字id，这可能比parseInt. 我还切换到this.$将选择器本地化到视图el，这可以避免尝试查找尚未添加到 DOM 的内容时出现问题。

我还建议您ui在构造函数中创建，而不是作为视图“类”的一部分。这：

initialize: function() {
    this.ui = { };
}

将为视图的每个实例提供自己的ui，而这个：

var View = Backbone.View.extend({
    ui : { },
    //...

将附加ui到视图的原型，因此视图的ui所有实例都将共享一个。这对你来说可能不是问题，但坏习惯就是坏习惯。

演示：http: //jsfiddle.net/ambiguous/wNkqK/

于 2013-06-27T19:50:38.307 回答