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

Question

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

然后我决定将数据与部分组件一起封装，因此查看了组件 - 据我了解组件可以做到这一点：隔离 template/partial 及其数据。

然后我查看加载组件：http://ractivejs.github.io/ractive-load/

但是，我并没有真正看到这种方法的优势 - 正如加载程序所显示的那样，您只能加载组件模板，而不是整个封装组件（数据、模板等）。您仍然必须将数据放入主 ractive 实例（就像使用部分实例一样）。

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

我可能没有很好地解释自己 - 这是我的代码...其中大部分来自 martydpx 的回答 )

....
<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/> 标签 - 它确实有效。

此外，组件在未渲染时会自动 'tear down' 吗？

Answer 1

我不是 100% 确定你在找什么。

首先你创建一个child组件-

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

你用 Ractive 运行时注册这个

Ractive.components.widget = MyWidget;

然后你创建一个parent组件

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

您使用 parent 实例将数据传递给 child

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

data.widget 映射到 MyWidget 的数据，in-turn 获取消息数据。

有关详细信息，请参阅 this

一般来说，您将创建和使用 3 种类型的组件 -

Self-sufficient 组件 - 它知道它自己需要知道的一切。你不传递任何东西给它。它创建自己的数据或知道从哪里获取数据。例如：一个徽标组件，它自己知道从哪里获取图像。
Dumb Components - 它们没有智能，它需要的所有数据都应该从 parent 传递。就像在我们的示例中一样 - MyWidget 不知道消息代表何处和代表什么。只是渲染它。无话可问。 Parent 将获取消息并将其传递。
智能组件 - 执行一些繁重工作的组件。一个例子是 Profile 组件。 Parent 将只向它传递一个 profileID，它知道从哪里获取配置文件数据，进行一些 ajax 调用，知道如何解析和解释数据，甚至可能启动一个套接字并监听变化等

所以你决定你想如何制作你的组件，谁负责并考虑 data-encapsulation 然后。

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

What is the difference between a ractive template, partial and component

javascript

ractivejs