1

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

例如纯 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;
}

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

我的模板：

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

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

4

2 回答 2

2

http://www.jsviews.com上有许多示例，其中包括事件绑定和用于删除或插入数据项的处理程序。您是否在此处查看示例：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)viewview.indexview.dataspecialist itemview.parent.dataspecialists

当然既然view.data是当前数据项，如果你的数据项实际上是一个视图模型，有方法，你可以调用一个方法view.data.someMethod(...)：

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

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

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

看看这个例子： http: //jsfiddle.net/BorisMoore/cGZZP/ - 它{on ...}用于绑定到帮助器以修改二维数组。

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

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

于 2014-07-09T04:52:55.993 回答
0

我不是 100% 确定我完全理解，但我相信我理解。您想使用不同的方法。查看.on的 jQuery。我一直都改用它。回调函数不需要更改。这真的很不错。

就我而言，我创建了数千个事件处理程序，这正在扼杀我的表现。所以我改用 .on ，它解决了我的问题。

这并不能完全回答你的问题......但我认为它是一个更好的解决方案。

于 2014-07-07T19:56:51.507 回答