Javascript 把这个绑在把手上

因此，我得到了一个大型JSON，其中有许多嵌套到主题中的项，我使用它从每个主题生成一个按钮。现在我想将对子对象的引用绑定到每个按钮中，这样它的onClick（）就不必执行繁重的查找，也不必将大量数据粘贴到按钮的事件中

这可以通过小胡子或其他模板语言来实现吗

JSON：

myJson={
   "topics": [
   {
       "name":"topic 1",
       "id":1,
       "items":[
           "name":"a great item",
           "data": {...}
       ]
   },
   ...
}

模板：

{{#topics}}
     <button onClick="_.bind(browseToTopic,{{this}})">{{name}}</button>
{{/topics}} 

<h1>Argh these pesky topics!</h1>
{{{#topics}}} <!-- Note the 3 mustaches to avoid html escaping -->

<button>Shiver me timber, I'm rusty ol' {{name}}</button>

{{#主题}
{{name}}
{{/主题}

我上周在尝试将事件绑定到“事物”列表时遇到了类似的问题。我的哲学斗争让我找到了关于胡子（和把手）缺乏逻辑性的答案：

重要的是要注意，从设计上讲，胡须的逻辑性要弱一些。这试图达到的目的是激励开发人员将逻辑与表示分离，即任何使您的表示标记“跳舞”或链接到“事物”的东西都不能单独用标记表达，应该远离您的模板

但回到我们的问题上来。。。当我意识到我的问题不是“如何将其与标记绑定”时，真正的尤里卡时刻来到了我的面前

我真正的问题是：“循环和循环项之间显然涉及逻辑。为什么我要在一个没有逻辑的环境中使用mustach来迭代它们？”

因此，在绕圈子转了几分钟后，你可能会想知道我的解决方案是什么：

这是我虚构的模板：

{{#topics}}
     <button onClick="_.bind(browseToTopic,{{this}})">{{name}}</button>
{{/topics}} 

<h1>Argh these pesky topics!</h1>
{{{#topics}}} <!-- Note the 3 mustaches to avoid html escaping -->

<button>Shiver me timber, I'm rusty ol' {{name}}</button>

Argh这些讨厌的话题！
{{{{主题}}

这是我的行模板：

{{#topics}}
     <button onClick="_.bind(browseToTopic,{{this}})">{{name}}</button>
{{/topics}} 

<h1>Argh these pesky topics!</h1>
{{{#topics}}} <!-- Note the 3 mustaches to avoid html escaping -->

<button>Shiver me timber, I'm rusty ol' {{name}}</button>

吓我一跳，我生锈了{{name}

然后是所有使用古老Javascript的逻辑：

/* Important: Assuming you're using jQuery, if not you'll have to convert the render output from a string to a DOM Node first. jQuery is NOT necessary for this to work - I'm just trying to avoid innerHTML hacks */
var topics = [/* whatever topics are,*/],
    topicsDOM = document.createDocumentFragment(),
    $ = jQuery,
    list,
    i, t, row;

for (i = 0, t = topics.length; i < t; i++) {
    row = $(Mustache.render(yourRowTemplate, topics[i]));

    row.on('click', function () {
        /* We know exactly what row this is via topics[i] so you can do anything you'd like here */
    };

    topicsDOM.appendChild(row);
}

/* Now... this bit I'm not very proud of and I'm hoping someone can point out a better solution */
list = $(Mustache.render(yourListTemplate, {
           topics: '<ins class="no-collision-please">'}));

/* We're doing this because we want to preserve the decorated DOM Nodes,
   Mustache expects plain markup as a string (our <ins>) */
list.find('ins.no-collision-please').replaceWith(topicsDOM);

/* Note that the <ins> never leaves our little sandbox nor does
   it cause reflow/layouting since we're working inside a documentFragment (list) */

return list;

/*重要提示：假设您使用的是jQuery，否则必须首先将渲染输出从字符串转换为DOM节点。jQuery并不是实现这一点的必要条件——我只是试图避免innerHTML攻击*/
var topics=[/*无论主题是什么，*/]，
topicsDOM=document.createDocumentFragment（），
$=jQuery，
列表
i、 t，世界其他地区；
对于（i=0，t=topics.length；i

最后，在吞下所有这些Kool Aid之后，明显的回味是：我必须这样做才能绑定一个事件，我宁愿在我的模板中添加一个

标记

如果你问过自己这个问题，也许无逻辑模板不适合你

免责声明：我使用车把/胡子不到一个月，但我仍然发现自己在某些使用情况下会问上述问题。我发现（在车把中，但可能也适用于胡子）这样做的方式不是。

如下：

• 创建一个以JSON（stringified）格式返回

  这个
  对象的帮助器

• 创建一个解析JSON并返回对象的函数
• 从模板中调用该函数

守则：

Handlebars.registerHelper('getThis', function() {
    return JSON.stringify(this);
});

browseToTopic = function(obj){
    console.log(JSON.parse(obj));
    // do other stuff..
}

HTML/模板：

{{#topics}}
     <button onClick="_.bind(browseToTopic,{{this}})">{{name}}</button>
{{/topics}} 

<h1>Argh these pesky topics!</h1>
{{{#topics}}} <!-- Note the 3 mustaches to avoid html escaping -->

<button>Shiver me timber, I'm rusty ol' {{name}}</button>

{{#topics}}
  <button onClick="_.bind(browseToTopic,{{getThis}})">{{name}}</button>
{{/topics}}

应该是：

 "items":[
     {
       "name":"a great item",
       "data": {...}
     }
   ]

2） 我写的代码只是一个概念证明，您可能希望改进

getThis

helper以避开字符串化的JSON

---

3） 您将在BrowsetTopic函数中找到的

这个
对象不是原始上下文的1:1副本，但它已转换为JSON，然后再次转换为object。这意味着目标对象将缺少所有非基本对象（例如函数）。考虑这是否足够满足你的需要。< /p>任何<代码> {{GETS}}} /Cord.>返回可能要适合于属性（如引文和AppSand），Suthase/把手只会逃出代码用作标记。进一步假设它只包含可编码的数据（没有函数、引用、其他非基本类型），感谢您指出，它肯定应该转义。而且，您是对的，它不会真正返回
this
，而是不带非基本类型或函数的副本；尽管如此，我仍然认为这足以满足OP的需要，同时保持代码的精简和可行性。感谢您的回复，但我对onclick=“u.bind（func，{long as hell data in here}感到不舒服。我强烈希望使用一些引用（正如我在最初的问题中所写的那样）是的，我同意你的看法，但是你开始使用
onclick
。正如有人在对主要问题的评论中指出的那样，最好避免使用它。要使用一些引用，我想你可以重新设计你的初始数据。非常感谢！这是一个很好的解决方案，但它是一个位于胡子/把手之上的js猴子补丁。必须有一个直接的解决方案尽管我承认这一点，但trickI也相信可能有一套解决方案可以解决所有这些问题，但我有一种感觉，它不涉及胡子/把手。我准备尝试任何其他模板语言，这将使我的生活更轻松。我将深入研究jquery模板的参考，并让您知道为什么您在2014年使用了
onclick
属性吗？