Javascript 抽象计算性质

我已经有了一个使用firebase的简单测试应用程序，其中包含以下ractive中的模板和模型。我想访问计算出的newprice中的价格值，将其格式化为带2位小数的货币。我不知道如何获得.price值，该值在输出中显示得很好，但我尝试过的东西似乎都看不到.price值在计算出的值中。对newprice的调用工作正常，因为我可以返回文本并在输出中看到它。它之所以使用.price，是因为firebase返回的数据将每个make、model、price包装在一个唯一的自动生成id中，因此我看到了一个具有每个条目id的顶级对象，其中的数据是一个具有make、model、price的对象

<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>

{{#每个列表数据：i}
{{.make}{{.model}{{.price}${{{newprice（）}}

{{/每个}}
var ractive=新ractive({
//“el”选项可以是节点、ID或CSS选择器。
el:‘集装箱’，
//我们可以按字符串传递，但为了方便起见
//我们正在传递上面标签的ID。
模板：“#模板”，
计算：{
newprice:function（）{
//不知道该怎么做才能看到价格
返回；
}
}
});

---

需要一些关于如何获取.price值的指导。

计算属性应用于整个模板-换句话说，没有

listdata[0]。在上面的示例中，只有一个
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' ) );
    }
  }
});


{{#每个列表数据：i}
{{.make}{{.model}:{{.price}->${{newprice（.price）}

{{/每个}}
var ractive=新ractive({
el:'主要'，
模板：“#模板”，
数据：{
列表数据：[
{品牌：'丰田'，型号：'普锐斯'，价格：25000}，
{制造：'Dodge'，型号：'Challenger'，价格：30000}，
{制造：'吉普'，型号：'大切诺基'，价格：35000}，
{品牌：'Bugatti'，型号：'Veyron'，价格：2000000}
],
折扣：0.1，
新价格：函数（旧价格）{
返回旧价格*（1-this.get（‘折扣’）；
}
}
});

这里有一个JSFiddle来演示：
计算属性应用于整个模板-换句话说，没有
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' ) );
    }
  }
});


{{#每个列表数据：i}
{{.make}{{.model}:{{.price}->${{newprice（.price）}

{{/每个}}
var ractive=新ractive({
el:'主要'，
模板：“#模板”，
数据：{
列表数据：[
{品牌：'丰田'，型号：'普锐斯'，价格：25000}，
{制造：'Dodge'，型号：'Challenger'，价格：30000}，
{制造：'吉普'，型号：'大切诺基'，价格：35000}，
{品牌：'Bugatti'，型号：'Veyron'，价格：2000000}
],
折扣：0.1，
新价格：函数（旧价格）{
返回旧价格*（1-this.get（‘折扣’）；
}
}
});

这里有一个JSFiddle来演示：
计算属性应用于整个模板-换句话说，没有
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' ) );
    }
  }
});


{{#每个列表数据：i}
{{.make}{{.model}:{{.price}->${{newprice（.price）}

{{/每个}}
var ractive=新ractive({
el:'主要'，
模板：“#模板”，
数据：{
列表数据：[
{品牌：'丰田'，型号：'普锐斯'，价格：25000}，
{制造：'Dodge'，型号：'Challenger'，价格：30000}，
{制造：'吉普'，型号：'大切诺基'，价格：35000}，
{品牌：'Bugatti'，型号：'Veyron'，价格：2000000}
],
折扣：0.1，
新价格：函数（旧价格）{
返回旧价格*（1-this.get（‘折扣’）；
}
}
});

这里有一个JSFiddle来演示：
计算属性应用于整个模板-换句话说，没有
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' ) );
    }
  }
});


{{#每个列表数据：i}
{{.make}{{.model}:{{.price}->${{newprice（.price）}

{{/每个}}
var ractive=新ractive({
el:'主要'，
模板：“#模板”，
数据：{
列表数据：[
{品牌：'丰田'，型号：'普锐斯'，价格：25000}，
{制造：'Dodge'，型号：'Challenger'，价格：30000}，
{制造：'吉普'，型号：'大切诺基'，价格：35000}，
{品牌：'Bugatti'，型号：'Veyron'，价格：2000000}
],
折扣：0.1，
新价格：函数（旧价格）{
返回旧价格*（1-this.get（‘折扣’）；
}
}
});

这里有一个JSFiddle来演示：
计算属性被引用为属性，而不是函数。而且，更重要的是，它们是“绝对”键路径，因此不会对集合起作用。要实现这一点，您有两个选择：

使用数据函数
使用数据函数代替计算属性：

<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>

如果您有一个现有的/最喜欢的库，那么您还可以在模板中内联使用此技术和访问方法

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

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


Ractive.defaults.data.accounting=会计
{{.make}{.model}{{.price}${{{accounting.formatMoney（.price）}}


使用计算属性，但在组件级别
使用组件渲染每个项目，然后计算的属性将为每个项目：

<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>


{{#每个列表数据：i}
{{/每个}}
{{make}{{model}{{price}}${{newprice}}

Ractive.components.line=Ractive.extend({
模板：“#行”，
计算：{
newprice:function（）{