RactiveJS: Частицы с (динамическими) локальными данными

Я пытаюсь разделить данные на частичные части, чтобы данные не смешивались/переписывались по всему миру.RactiveJS: Частицы с (динамическими) локальными данными

Проблема заключается в том, что основной шаблон не перерисовывается при изменении данных частичного.

Лучшее, что я сделал до сих пор, состоит в том, чтобы получить частичное повторное рендеринг в основном контейнере, но не внутри самого основного шаблона.

Я что-то упустил?

Вот код (также на JS Bin):

HTML:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>JS Bin</title> 
     <script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
     <script src="http://cdn.ractivejs.org/latest/ractive.js"></script> 
    </head> 
    <body> 
     <div id="main"></div> 
    </body> 
</html>

JS:

var partial = new Ractive({ 
     template: '{{name.first}} {{name.last}}', 
     oninit: function() { 
      this.observe(function (newValue, oldValue, keyPath) { 
       console.info('newValue = %o, oldValue = %o, keyPath = %s', newValue, oldValue, keyPath); 
      }); 
     }, 
     data: { 
      name: { 
       first: 'John', 
       last : 'Doe' 
      } 
     } 
    }), 

    main = new Ractive({ 
     el: '#main', 
     // template: 'Hello {{name}}!', 
     template: 'Hello {{>partial}}!', 
     partials: { 
      partial: function (p) { 
       // 1) Not working... 
       // return '{{name.first}} {{name.last}}'; 

       // 2) ...also not working... 
       // return partial.template; 

       // 3) ...still not working... 
       // return (p.isParsed(partial.template)) ? partial.template : p.parse(partial.template); 

       // 4) Kind of working... (static - does not re-render) 
       // return partial.toHTML(); 

       // 5) Kind of working... (returning Promise!) 
       return partial.render(this.el); 
      } 
     }, 
     data: { 
      name: 'John Doe' 
     } 
    }); 

// partial.set('name.first', 'Jane');

источник

2015-10-27 Miro

У вас есть два способа сделать это. Во-первых, вы все равно можете использовать частичные, но you force the context of the partial. Обратите внимание, однако, что данные все равно будут находиться в одном экземпляре. В следующем примере частичная информация собирает «Джон Доу» в качестве данных. Но во втором частичном использовании мы вынуждаем к нему объект jane, поэтому он использует first и last от jane.

var main = new Ractive({ 
    el: '#main', 
    template: 'Hello {{>personPartial john}} and {{>personPartial jane}}!', 
    partials: { 
    personPartial: '{{first}} {{last}}' 
    }, 
    data: { 
    first: 'John', 
    last : 'Doe', 
    jane: { 
     first: 'Jane', 
     last : 'Dee' 
    } 
    } 
}); 

main.set('jane.name.first', 'Jen');

Если вы действительно разделяете данные, consider using components instead. В этом случае John и Jane являются их собственными компонентами. Обратите внимание, однако, что если компонент не хватает данных (например, John не имеет first), он будет искать в родительском (main) для этих данных. Если это произойдет, он будет использовать это (в данном случае foo). Вы можете использовать isolated:true, чтобы предотвратить это поведение, например, в Jane. Вы также можете явно передавать данные от родителя к ребенку с помощью атрибутов.

var John = Ractive.extend({ 
    template: 'Hello {{first}} {{last}}!', 
    data: { 
    last: 'Doe' 
    } 
}); 

var Jane = Ractive.extend({ 
    isolated: true, 
    template: 'Hello {{first}} {{last}}!', 
    data: { 
    first: 'Jane', 
    } 
}); 

var Jay = Ractive.extend({ 
    isolated: true, 
    template: 'Hello {{first}} {{last}}!' 
}); 

var main = new Ractive({ 
    el: '#main', 
    template: 'Hello {{>person}}! <john /> <jane /> <jay first="{{first}}" last="{{last}}" />', 
    partials: { 
    person: '{{first}} {{last}}' 
    }, 
    components: { 
    john: John, 
    jane: Jane, 
    jay: Jay 
    }, 
    data: { 
    first: 'foo', 
    last: 'bar' 
    } 
});

источник

2015-10-27 00:53:28 Joseph

Спасибо! Я провел некоторое время с разными подходами, но выбрал ваше первое предложение - [форсирование контекста частичного] (http://jsbin.com/firizefaja/edit?js,output). Хотя я также отчасти «разделял» данные, помещая частичные данные в отдельные под-объекты свойства data. – Miro

RactiveJS: Частицы с (динамическими) локальными данными

ответ

Смежные вопросы