javascript - 如何在主干中实现 Angular 样式指令？

Question

我知道这个库 https://github.com/berzniz/backbone.directives 。但是我想知道是否有一种方法可以在不使用库的情况下在主干中实现 Angular 样式指令。(也许通过下划线或主干 View )我的用例是我希望 div 标签内的 html 仅在以下情况下可见变量 isVisible 为 true。

<div bb-show="isVisible">
   <h1>You can see this</h1>
</div>

有没有办法通过主干来实现这一点？

Answer 1

如果您只想根据变量值隐藏渲染部分，请检查 t_dom93 的 answer关于下划线模板。

<小时/>

Backbone 不是一个框架，而是一个工具箱。它不进行绑定(bind)，甚至不进行自身渲染。默认情况下，它使用 jQuery，并让您可以根据自己的喜好实现绑定(bind)。因此，在没有库的情况下实现像 Angular 这样的双向绑定(bind)需要相当于编写自己的库，使用 jQuery 将数据与 HTML 标记上的自定义 data 属性绑定(bind)。

<小时/>

Epoxy.js

我发现最接近的是 Epoxy.js。它提供像 Stickit 一样的双向绑定(bind)，而且还提供过滤器、处理程序、计算字段。

很容易集成到现有项目中。它几乎是透明的，如果您开始使用它，您没有义务在任何地方使用它，因为普通 Backbone 和 Epoxy 可以共存。

绑定(bind)示例

ng-show 行为可以通过 toggle handler 来实现(单向绑定(bind)):

<div data-bind="toggle:modelAttribute">
    This is visible only if modelAttribute is truthy.
</div>

ng-model 是 value handler (双向绑定(bind))并且可以与任何其他处理程序组合:

<input name="firstname" data-bind="value:firstname,events:['keydown']">

参见all the handlers .

计算属性

An Epoxy model introduces computed attributes, which operate as accessors and mutators. A computed attribute will get an assembled value derived from other model attributes, and will set one more more mutated values back to the model. Computed attributes may be get and set just like normal model attributes, and will trigger "change" events on the model when modified, however they do not exist within the model's attributes table, nor will they be saved with model data.

var BindingModel = Backbone.Epoxy.Model.extend({
  defaults: {
    firstName: "Obi-Wan",
    lastName: "Kenobi"
  },
  computeds: {
    fullName: function() {
        return this.get("firstName") +" "+ this.get("lastName");
    }
  }
});

var view = new Backbone.Epoxy.View({
  el: "#app-computed",
  model: new BindingModel()
});

在模板中

<div id="app-computed">
  <label>First:</label>
  <input type="text" data-bind="value:firstName,events:['keyup']">

  <label>Last:</label>
  <input type="text" data-bind="value:lastName,events:['keyup']">

  <b>Full Name:</b>
  <span data-bind="text:fullName"></span>
</div>

绑定(bind)过滤器

Epoxy tries to strike a balance between robust binding options and clean binding definitions. While Epoxy uses a similar binding technique to Knockout.js, it intentionally discourages some of Knockout's inline-javascript allowances.

Instead, Epoxy provides filtering wrappers for formatting data directly within your bindings. Notice how the not() and format() filters are used in the following binding scheme:

<span data-bind="toggle:not(firstName)">Please enter a first name.</span>

参见all the filters .

<小时/>

Knockback.js

如果您已经喜欢 Knockout.js 并且缺少 Backbone 的某些功能，Knockback.js 可能是最好的选择。他们提供了相当完整的 CoffeeScript 和 JS 文档。

ViewModel 和 Observable

与 Epoxy 相比，这是一个额外的步骤，Epoxy 将模型与绑定(bind)和计算完全分离。

var model = new Backbone.Model({first_name: "Planet", last_name: "Earth"});

var ViewModel = function(model) {
  this.first_name = kb.observable(model, 'first_name');
  this.last_name = kb.observable(model, 'last_name');
  this.full_name = ko.computed((function() {return "" + (this.first_name()) + " " + (this.last_name());}), this);
};

var view_model = new ViewModel(model);

ko.applyBindings(view_model, $('#kb_observable')[0]);

模板绑​​定非常相似:

<input data-bind="value: first_name, valueUpdate: 'keyup'" />