0

为这样一个新手问题道歉，但我真的被困在这里。

我正在研究某人的代码并试图理解它。

我有这个模板'temp.tmpl'：

<li class="icon mu status-{{state}} type-{{type}}" style="background-color:{{colour}};">
    <a href="#">
        <span class="top-stat"><span>{{topStatNumber}}</span><span>{{topStatModifier}}</span></span>
        <span class="display-text">{{#if promotionName}}{{promotionName}}{{else}}{{name}}{{/if}}</span>
    </a>
</li>

和以下观点：

define([
  'views/toolkitView',
  'text!templates/components/temp.tmpl'
], function(ToolkitView, MUItem) {

  return ToolkitView.extend({

    template:MUItem,

    events: {
      "click a": "showActiveMU"
    },

    showActiveMU: function() {

      this.trigger("active:mu:selected", this.model.get("code"));

      return false;
    }
  });
});

我无法弄清楚变量是如何在模板中呈现的或正在编译的模板是什么？

4

1 回答 1

1

没有看到 ToolkitView 的内容，很难给出完整的答案，但我相信这是正在发生的事情：

您的新视图扩展了ToolkitView，并继承了该视图的方法。可能有一种render方法可以采用任何模板视图，该视图使用来自分配给视图的任何模型的数据呈现您的模板（在这种情况下，它是MUItem您通过define语句加载的模板）。ToolKitView用作“基础”允许您在视图之间共享通用方法，并根据需要调整或扩展它们。

作为对您关于以下内容的评论的回应showActiveMu：当您创建此视图的新实例并为其分配模型时，该视图能够通过 访问模型this.model。在您的情况下，视图的showActiveMU方法将触发一个事件，从模型中获取“代码”属性，并将其作为参数传递给任何侦听该事件的函数。更多关于骨干事件在这里。

var Model = new FooModel();
var muItem = new MUView({model: fooModel});

// listen for event triggered by the view's showActiveMU event
muitem.on('active:mu:selected', function (code) {
  console.log(code); // the code from the model assigned to muItem view
});
于 2013-08-06T15:43:07.140 回答