Ractive вычисляемое свойство

Question

У меня есть простое тестовое приложение, использующее Firebase со следующим шаблоном и моделью в ractive. Я хочу получить доступ к значению цены в вычисленной новой цене, чтобы отформатировать ее в виде валюты с двумя десятичными знаками. Я не могу понять, как получить значение.price, которое хорошо отображается в выводе, но ничего из того, что я пробовал, похоже, не может увидеть.price внутри вычисленного. Вызов newprice работает нормально, так как я могу просто вернуть текст и увидеть его в выводе. Причина, по которой он использует.price, заключается в том, что возвращаемые данные из firebase имеют каждую марку, модель, цену, заключенную в уникальный автоматически сгенерированный идентификатор, поэтому я вижу объект верхнего уровня с каждым идентификатором записи и данными внутри как объект с маркой, моделью, цена.

<script id='template' type='text/ractive'>
{{#each listdata:i}}
    <p>{{ .make }} {{ .model }}{{.price}} ${{ newprice() }}!</p>
{{/each}}
</script>
<script>
    var ractive = new Ractive({
      // The `el` option can be a node, an ID, or a CSS selector.
      el: 'container',

      // We could pass in a string, but for the sake of convenience
      // we're passing the ID of the <script> tag above.
      template: '#template',
      computed: {
        newprice: function() {
          // CAN'T FIGURE OUT WHAT TO DO HERE TO SEE price
          return  ;
        }
      }
    });

</script>

Нужно какое-то направление о том, как добраться до цены.price.

Answer 1

Вычисленные свойства упоминаются как свойства, а не функции. И, что более важно, это "абсолютные" ключевые пути, поэтому они не будут работать с коллекцией. Чтобы заставить это работать, у вас есть два варианта:

Используйте функцию данных

Вместо вычисляемого свойства используйте функцию данных:

<script id='template' type='text/ractive'>
{{#each listdata:i}}
    <p>{{ .make }} {{ .model }}{{.price}} ${{ newprice(.price) }}!</p>
{{/each}}
</script>
<script>
    var ractive = new Ractive({
      el: 'container',
      template: '#template',
      data: {
        newprice: function(price) {
          return price + 1;
        },
        // other data
      }
    });

</script>

Возможно, вам будет удобнее разместить вспомогательную функцию "глобально":

Ractive.defaults.data.newprice = function(price){...}

Если у вас есть существующая / любимая библиотека, вы также можете использовать эту технику и использовать встроенные методы в своем шаблоне.

<script src="path/to/accounting.js"></script>
Ractive.defaults.data.accounting = accounting

<p>{{ .make }} {{ .model }}{{.price}} ${{ accounting.formatMoney(.price) }}!</p>

Используйте вычисляемое свойство, но на уровне компонента

Используйте компонент для визуализации каждого элемента, и тогда вычисленное свойство будет для каждого элемента:

<script id='template' type='text/ractive'>
{{#each listdata:i}}
    <line/>
{{/each}}
</script>

<script id='line' type='text/ractive'>
    <p>{{ make }} {{ model }}{{price}} ${{ newprice }}!</p>
</script>

<script>
    Ractive.components.line = Ractive.extend({
      template: '#line',
      computed : {
        newprice: function(){
           return this.get('price')
        }
      }
    })
    var ractive = new Ractive({
      el: 'container',
      template: '#template',
    });

</script>

Answer 2

Вычисленные свойства применяются ко всему шаблону - другими словами, нет listdata[0].newprice и так далее в приведенном выше примере, только один newprice,

Вместо этого вам нужно создать функцию, к которой Ractive сможет обращаться из шаблона, и передать в нее старую цену:

<!-- language: lang-html -->

{{#each listdata:i}}
  <p>{{ .make }} {{ .model }}: {{.price}} -> ${{ newprice( .price ) }}!</p>
{{/each}}

<!-- language: lang-js -->

var ractive = new Ractive({
  el: 'main',
  template: '#template',
  data: {
    listdata: [
      { make: 'Toyota', model: 'Prius', price: 25000 },
      { make: 'Dodge', model: 'Challenger', price: 30000 },
      { make: 'Jeep', model: 'Grand Cherokee', price: 35000 },
      { make: 'Bugatti', model: 'Veyron', price: 2000000 }
    ],
    discount: 0.1,
    newprice: function ( oldprice ) {
      return oldprice * ( 1 - this.get( 'discount' ) );
    }
  }
});

Вот JSFiddle для демонстрации: http://jsfiddle.net/rich_harris/nsnhwobg/