Question

我在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

Answer 1

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

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

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

我还建议你在构造函数中创建ui而不是视图“class”的一部分。这样：

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

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

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

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