活性模板，部分和组件之间有什么区别

Question

我已经使用部分构建了一个 ractive.js 应用程序。这些部分是通过 fetch/ajax 加载的 - 一切都很好。

然后我决定将数据与部分一起封装，因此查看了组件 - 因为我理解组件就是这样做的：隔离模板/部分及其数据。

然后我希望将组件加载到：http://ractivejs.github.io/ractive-load/

但是，我并没有真正看到这种方法的优势 - 因为它与加载器一起出现，您只能加载到组件模板中，而不是整个封装的组件（数据、模板等）。您仍然必须将数据放到主要的 ractive 实例上（就像使用部分数据一样）。

我正在尝试动态更新组件。我也在使用 page.js 进行路由。我正在尝试将所有问题分开。

我可能没有很好地解释自己 - 这是我的代码...大部分来自 martydpx 的答案How to create Ractive's subcomponents dynamically and change them programmatically)

....
<dynamic name='{{name}}'/>
</script>


<script>
// Component loader
Ractive.load({
 home:      '/components/home.html', // seems this can only contain a template. Is it possible for it to contain everything - data and all?
 packs:     '/components/packs.html',
 ....
 addplayer: '/components/addplayer.html',
 notfound:  '/components/notfound.html',
}).then( function ( components ) {

Ractive.components[ 'home' ]      = components.home;
Ractive.components[ 'packs' ]     = components.packs;
....
Ractive.components[ 'addplayer' ] = components.addplayer;
Ractive.components[ 'notfound' ]  = components.notfound;

// dynamically load component based on route
Ractive.components.dynamic = Ractive.extend({
  template: '<component/>',
  components: {
      component: function() {
        this.set('foo','bar'); // I can dynamically set the data here.. but how would I add defaults for each component, within the component?
        return this.get('route');
      }
  },
  oninit: function(){
      this.observe('route', function(){
          this.reset();
      },
      { init: false}
    );
  }
});

var r = new Ractive({
    el: document.body,
    template: '#template',
    data: {
      route: 'home'
    }
});

// Routing. Sets the route... which triggers the component
page('/', index);
 ...
page();

function index() {
  console.log('index');
  r.set('route','home')
}

编辑

我已经阅读了这篇文章 - 这对我很有帮助 :)

https://github.com/ractivejs/component-spec/blob/master/authors.md

在动态组件场景中 - 我将如何动态更新组件特定数据。当组件标签被硬连线到页面中时，我似乎能够做到这一点......但在动态创建组件标签时却不行。在控制台中玩了很多之后 - 好像它没有看到动态组件。所以像r.findComponent('home').get() 这样的东西不起作用。

然而，如果我在模板中添加一个 <home/> 标记 - 它确实有效。

另外，组件在未渲染时会自动“拆除”吗？

Answer 1

我不能 100% 确定您在寻找什么。

首先你创建一个子组件-

var MyWidget = Ractive.extend({
  template: '<div>{{message}}</div>',
    data: {
    message: 'No message specified, using the default'
  }
});

你在 Ractive 运行时注册它

Ractive.components.widget = MyWidget;

然后你创建一个父组件

var Parent = Ractive.extend({
   template: '<div>
                 <MyWidget message={{widget}} />
             </div>'       
});

您使用父实例将数据传递给子实例

// Live instance of parent
new Parent({
  el: 'id',
  data : {
     widget: {
       message : 'Waddup kiddo'
     }
  }
});

data.widget 被映射到 MyWidget 的数据，进而得到消息数据。

更多信息请参考this

通常您将创建和使用 3 种类型的组件 -

1. 自给自足的组件 - 它知道自己需要知道的一切。你没有传递任何东西给它。它创建自己的数据或知道从哪里获取数据。例如：一个徽标组件，它自己知道从哪里获取图像。

2. 哑组件 - 它们没有智能，它需要的所有数据都应该从父组件传递。就像在我们的示例中一样 - MyWidget 不知道消息代表的位置和含义。只是渲染它。无话可问。父母将获取消息并传递它。

3. 智能组件 - 执行一些繁重工作的组件。一个例子是 Profile 组件。 Parent 将只传递一个 profileID 给它，它知道从哪里获取配置文件数据，执行一些 ajax 调用，知道如何解析和解释数据，甚至可能启动一个套接字并监听更改等。

因此，您决定如何制作组件，由谁负责，然后考虑数据封装。