如何在骨干中实现角度样式指令？

Question

我知道这个库https://github.com/berzniz/backbone.directives。但是我想知道是否有一种方法在骨干中实现角度样式指令而不使用库。（可能通过下划线或主干视图）我的用例是我希望div标签内的html只有在变量isVisible是真的。

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

有没有办法通过骨干来实现这一目标？

Answer 1

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

Backbone不是框架，它是一个工具箱。它不进行绑定，甚至不进行渲染。默认情况下它使用jQuery，然后根据需要实现绑定。因此，实现双向绑定（如没有lib的angular）需要相当于编写自己的lib，使用jQuery在HTML标记上使用自定义data属性绑定数据。

Epoxy.js

我发现最接近的是Epoxy.js。它提供了像Stickit这样的双向绑定，还提供了过滤器，处理程序，计算字段。

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

绑定示例

使用toggle handler（单向绑定）可以实现ng-show行为：

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

ng-model是value handler（双向绑定），可以与任何其他处理程序结合使用：

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

请参阅all the handlers。

计算属性

  

环氧树脂模型引入了计算属性，其运行方式为   访问者和变异者。计算属性将被组合   从其他模型属性派生的值，并将设置更多   突变的值回到模型。计算属性可能获取   和设置一样，就像普通的模型属性一样，并会触发   修改后模型上的"change"个事件，但它们没有   存在于模型的attributes表中，也不会保存   与模型数据。

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>

绑定过滤器

  

Epoxy试图在强大的绑定选项和之间取得平衡   干净的绑定定义。虽然Epoxy使用类似的绑定   技术到Knockout.js，它故意劝阻一些   淘汰赛的内联javascript津贴。

     

相反，Epoxy提供了用于格式化数据的过滤包装器   直接在你的绑定中。注意not()和format()的方式   过滤器用于以下绑定方案：

<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相比，这是一个额外的步骤，它将模型从绑定和计算中完全分离出来。

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'" />

Answer 2

在Angular中，您拥有独特的双向数据绑定概念：

.controller("myCtrl", function($scope) {
    $scope.isVisible = true;
    $scope.hide = function() {
        this.isVisible = false;
    }
})

视图可以访问模型，有几种方法可以在视图中显示模型数据，其中一种方法是使用 ng-show directive ：

ng-show="isVisible"

AngularJS example

Backbone.js不进行任何数据绑定。但是您可以使用下划线模板方法并传入一个数据对象，该数据对象具有与模板的自由变量对应的属性。：

this.$el.html(this.template({
    isVisible: this.condition
}));

现在您的isVisible变量可在您的模板中使用。如果它是假的，它将不会呈现HTML，否则它将会。

<script id="myTemplate" type="text/template" >
    <% if(isVisible) { %>
    <div>
       <h1>You can see this</h1>
    </div>
    <% } %>
    <button class="js-hide">Hide</button>
</script>

BackboneJS example

Answer 3

没有图书馆，就很难实现。我发现了对双向绑定的帮助：https://github.com/NYTimes/backbone.stickit

来自他们的文档：

“与view.events类似，您可以定义view.bindings以将选择器映射到绑定配置。以下绑定配置会将view.$('#title')元素绑定到title模型属性， view.$('#author')模型属性的authorName元素：“

bindings: {
  '#title': 'title',
  '#author': 'authorName'
}