Question

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

然后我决定将数据与部分内容一起封装以便查看组件 - 正如我所理解的那样，组件可以做到这一点：用模板隔离模板/部分。

然后我开始在http://ractivejs.github.io/ractive-load/

中加载组件

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

我正在尝试动态更新组件。我也使用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种类型的组件。使用 -

自给自足的组件 - 它知道自己需要知道的一切。你没有传递任何东西。它创建自己的数据或知道从哪里获取数据。例如：一个徽标组件，它自己知道从哪里获取图像。
哑组件 - 他们没有智能，所需的所有数据都应该从父传递。就像在我们的例子中 - MyWidget不知道在哪里和什么消息代表。只是呈现它。无话可问。 Parent将获取消息并将其传递。
智能组件 - 做一些繁重的组件。一个例子是Profile组件。 Parent将只传递一个profileID，它知道从何处获取配置文件数据，执行一些ajax调用，知道如何解析和解释数据，甚至可以启动套接字并监听更改等。
< / LI>
因此，您决定如何制作组件，谁负责并考虑数据封装。

ractive模板，partial和component之间有什么区别

1 个答案: