javascript - jsrender (jsviews) 绑定(bind)处理程序

Question

我第一次尝试使用 jsrender/jsviews。它看起来很棒，但我找不到明确的文档或示例如何为生成的内容动态绑定(bind)事件处理程序。

例如，纯 jQuery 旧方法是:

从 bean 类中渲染对象集合的代码:

container = $('#tabs-my');
this.load( // Obtain array of objects
    $.proxy(function(list){
        container.html('');
        list.forEach(
            $.proxy(function(it, i){
                container.append(this.renderItem(it));
            }
            ,this)
        );
    }
    ,this)
);

在对象本身的渲染方法中:

,renderItem: function(/*Specialist*/ it){
    var container = $('<div class="specialist-item" />')
    container.append(
        $('<span class="x">Remove</span>').click($.proxy(function(){
            this.removeSpecialistFromList(it.id)
        }
        ,this))
    );
    container.append(
        $('<span class="x">Edit</span>').click($.proxy(function(){
            this.renderSaveForm(container)
        }
        ,this))
    );
    container.append('<p><b>' + it.name + '</b> &nbsp; <i>' + it.phone + '</i></p>' +
    '<p>' + it.skill + '</p>' +
    ( it.city ? '<p>' + it.city.name + '</p>' : ''));
    return container;
}

请注意，我通过当前对象的闭包内容绑定(bind)处理程序，而没有在标记本身中使用任何外部标识符。然后我尝试使用模板将内容与可视化分开。

我的模板:

<div class="specialists-list">
    Items in list: {{:specialists.length}}
    {^{for specialists}}
        <div class="specialist-item">
            <span class="x">Remove</span><span class="x">Edit</span>

            <p><b class="name">{{:name}}</b> &nbsp; <i class="phone">{{:phone}}</i></p>
            <p class="skill">{{:skill}}</p>
            <p class="city">{{:city.name}}</p>
        </div>
    {{/for}}
</div>

并呈现为:

var template = $.templates({
    specialistsTmpl: tmpl
});
$.templates.specialistsTmpl.link(container, {
    specialists: list
});

我意识到这可以通过在属性中使用通用处理程序来完成，例如:

<span class="x" data-id="{{:id}}">Edit</span>

然后再次尝试从外部获取该对象。但这是解决方法，不需要。有没有办法在模板中或通过助手、自定义标签绑定(bind)处理程序？

Answer 1

http://www.jsviews.com上有很多样本其中包括事件绑定(bind)和处理程序，例如用于删除或插入数据项。你看过这里的例子了吗:http://www.jsviews.com/#samples/editable - 您会发现针对同一场景的四种不同方法。

例如:

模板

{^{for languages}}
  <input data-link="name" />
  <img class="removeLanguage" .../>
{{/for}}

代码:

$.link.movieTmpl("#movieList", app)
  .on("click", ".removeLanguage", function() {
    var view = $.view(this);
    $.observable(view.parent.data).remove(view.index);
    return false;
  });

请注意 var view $.view(this); 的使用 - 您传入被单击的元素 (this) 和 $. view(clickedElement) 向您返回 view，您可以从中获取 view.index(项目索引 - 在对数组进行迭代的情况下)， view.data(当前数据项 - 在您的情况下，它将是 specialist item)，view.parent.data(在您的情况下, specialists 数组)等

当然因为 view.data 是当前数据项，如果你的数据项实际上是一个 View 模型，有方法，你可以调用一个方法:view.data.someMethod (...)。

但作为使用 jQuery on() 绑定(bind)处理程序的替代方法，您可以直接在模板中使用声明式绑定(bind)，如下所示:

{^{for specialists}}
    <div class="specialist-item">
        <span class="x" data-link="{on removeMe}">Remove</span> ...
        ...
    </div>
{{/for}}

我假设您的专家有一个 removeMe() 方法。 "{on ...}" 绑定(bind)默认绑定(bind)到点击事件，您可以绑定(bind)到数据上的方法或助手等。

看看这个例子:http://jsfiddle.net/BorisMoore/cGZZP/ - 它使用 {on ...} 绑定(bind)到帮助程序以修改二维数组。

我希望不久之后使用 {on ...} 绑定(bind)创建一些新示例。

顺便说一句，我不建议使用 onAfterCreate 进行事件绑定(bind)。上述任何一种方法都更好，并且将确保正确处理事件绑定(bind)。