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

我知道这个图书馆。然而，我想知道是否有一种方法可以在主干中实现角度样式指令而不使用库。（可能通过下划线或主干视图）我的用例是，我希望div标记中的html只有在变量isVisible为true时才可见

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

你可以看到这个

---

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

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

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

视图可以访问模型，在视图中显示模型数据有多种方式，其中之一是使用ng show指令：

ng-show="isVisible"

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

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

现在您的isVisible变量在模板中可用。如果为false，则不会呈现HTML，否则会

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

你可以看到这个
隐藏

---

如果没有库，就很难实现。我发现stick.it对双向绑定有帮助：

从他们的文档中：

“类似于

view.events

，您可以定义

view.bindings

以将选择器映射到绑定配置。以下绑定配置将

视图。$（'#title'）

元素绑定到

title

模型属性和

视图。$（'#author'）”

元素添加到

authorName

model属性：

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

---

主干网不是一个框架，它是一个工具箱。它本身不进行绑定，甚至不进行渲染。默认情况下，它使用jQuery实现绑定，并让您自行决定如何实现绑定。因此，在没有lib的情况下实现像angular这样的双向绑定需要编写自己的lib，使用jQuery在HTML标记上使用自定义

data

属性绑定数据

---

我发现最接近于此的是Epoxy.js。它提供像Stickit一样的双向绑定，但也提供过滤器、处理程序和计算字段

很容易集成到现有项目中。它几乎是透明的，如果你开始使用它，你没有义务在任何地方使用它，因为香草主干和环氧树脂可以共存

绑定示例

ng show

行为可以通过（单向绑定）实现：

看

计算属性 环氧树脂模型引入了计算属性，其操作如下 存取器和变异器。计算属性将得到一个集合的 值派生自其他模型属性，并将再设置一个 将经过修改的值返回到模型。计算属性可能是get 和像普通模型属性一样设置，并将触发

“更改”

修改时模型上的事件，但它们不会 存在于模型的

属性

表中，也不会保存这些属性 使用模型数据

在模板中

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

看

---

如果您已经喜欢Knockout.js，并且缺少主干网的一些功能，那么knockock.js可能是最好的选择。他们用CoffeeScript和JS提供了一个相当完整的文档

视图模型和可观察 与环氧树脂相比，这是一个额外的步骤，环氧树脂将模型与绑定和计算完全分离

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

我已经在主干项目中使用了

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>

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

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