如何将ractive用作骨干.js中的视图组件

问题描述

我是ractive.js的新手，并希望将其与Beta.js集成.我找到了用于ractive的主干适配器，但是没有找到可以有效使用它的示例.需要一个示例来说明如何将ractive.js用作骨干.js中的视图组件

I am new to ractive.js and want to integrate it with backbone.js. I found a backbone adapter for ractive howevere didn't found a sample which will show to use it effectively. Need a sample that explain how to use ractive.js as a view component in backbone.js

推荐答案

由于官方演示似乎已经失效，因此我可以根据其余文档编写一个简单的演示.

Since the official demo seems to be down, I was able to put together a simple demo based on the rest of documentation.

基本上在主干和依赖项之后包括ractive和用于主干的活动适配器，然后在您的视图的render方法初始化一个新的ractive视图，将主视图的元素，模板和模型数据分别传递给该视图，分别为el，template和data，如下例所示.

Basically include ractive and ractive adapter for backbone after backbone and dependencies, then in your view's render method initialize a new ractive view passing it the backbone view's element, template and model data as el, template and data respectively as shown in below example.

对于一种方式绑定，请使用模型获取方法(如{{model.get('prop')}}对于两种方式的绑定，直接引用属性{{model.attributes.name}}

For one way bindings, use the model getter method like {{model.get('prop')}}and for two way bindings directly refer the property like {{model.attributes.name}}

此外，为避免发生内存泄漏的可能性，请覆盖主干视图的remove方法，并使其在删除自身的活动视图之前将其删除.

Also, to avoid possibility of memory leak, override backbone view's remove method and have it destroy it's ractive view before removing itself.

希望评论说明过程:

// Nothing special, create a model instance with data
var model = new Backbone.Model({
  name: "John"
});

// Backbone view constructor
var View = Backbone.View.extend({
  template: $('#ractiveTest').html(),
  initialize: function() {
    this.render();
  },
  events: {
    'click button': 'remove'
  },
  render: function() {
    //initialize ractive view as part of rendering
    this.ractive = new Ractive({
      el: this.el, // pass the view's element to ractive
      template: this.template, // pass the view's template to ractive
      data: {
        user: this.model // pass view's model data to ractive
      }
    });
  },
  //override view's remove method to destroy ractive instance as well
  remove: function() {
    // Just for added safety
    this.ractive.teardown();
    Backbone.View.prototype.remove.call(this);
  }
});

// initialize the view and pass in the model.
var view = new View({
  model: model
});

// append the view to DOM
view.$el.appendTo(document.body);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.1/backbone.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ractive/0.7.3/ractive.js"></script>
<script src="//cdn.jsdelivr.net/ractive.adaptors-backbone/latest/ractive-adaptors-backbone.min.js"></script>
<script type="text/template" id="ractiveTest">
  <label>
    Enter your name:
    <input value="{{user.attributes.name}}">
  </label>
  <p>Hello, {{user.get('name')}}!</p>
  <button>remove</button>
</script>

我觉得有点奇怪，我们必须在模板中执行user.get('name')进行单向绑定，而执行user.attributes.name进行双向绑定.

I find it a bit strange that we have to do user.get('name') in the template for one way binding and user.attributes.name for two way binding.

它可能已经像user.name这样在主干适配器中被抽象化了，例如铆钉可以.

It could've been abstracted away in the Backbone adapter likeuser.name likes rivets does.

这篇关于如何将ractive用作骨干.js中的视图组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！