申し訳ありませんが、問題がわかりません、ロマン。
次のコードでテストしました。
<polymer-element name="my-component" attributes="status count">
<template>
<style>
</style>
<div >
<h1>You have {{ tasks.length }} tasks, {{ remaining }} remaining</h1>
<div
style="border: solid 1px red; padding: 20px; border-radius: 20px; display: inline-block;"
on-click="{{ doTask }}"
>
Click to mark as done
</div>
<div>
{{ tasks[0].done }}
</div>
</div>
</template>
<script>
Polymer("my-component", {
tasks: [
{name: "foo", done: false},
{name: "bar", done: true}
],
get remaining() {
return this.tasks.filter(function(t) { return !t.done }).length;
},
doTask: function() {
this.tasks[0].done = true;
}
});
</script>
</polymer-element>
ボタンをクリックすると、ラベルの値が変更されます。つまり、reminingゲッターが変更を検出します。Linux 上の Chromium 41 と Firefox でテストしました。
私のコードはhttp://embed.plnkr.co/HXaKsQHjchqwe0P3bjy5/previewでテストできます
何をしたいのか、私のコードとどのように違うのか、詳細を教えてください。
編集
Twitter 経由で @romaintaz と話した後、次のようにボタンが if テンプレート内にある場合にのみ問題が発生するようです。
<div >
<h1>You have {{ tasks.length }} tasks, {{ remaining }} remaining</h1>
<template repeat="{{ task, taskIndex in tasks }}">
<template if="{{task.done}}">
<button
style="border: solid 1px red; padding: 20px; border-radius: 20px; display: inline-block;"
on-click="{{ doTask }}"
>Click 1</button>
</template>
<template if="{{!task.done}}">
<button
style="border: solid 1px red; padding: 20px; border-radius: 20px; display: inline-block;"
on-click="{{ doTask }}"
>Click 2</button>
</template>
</template>
<div>
{{ tasks[0].done }}
</div>
この場合、removinggetter はリストの項目プロパティの 1 つの変更を検出しなくなります。
現時点では、簡単な解決策しかありません。リスト項目の 1 つのプロパティのみを変更するのではなく、リスト項目全体を変更してから、ゲッターがそれを確認します。
例：
<polymer-element name="my-component" attributes="status count">
<template>
<style>
</style>
<div >
<h1>You have {{ tasks.length }} tasks, {{ remaining }} remaining</h1>
<template repeat="{{ task, taskIndex in tasks }}">
<template if="{{task.done}}">
<button
style="border: solid 1px red; padding: 20px; border-radius: 20px; display: inline-block;"
on-click="{{ doTask }}"
>Click 1</button>
</template>
<template if="{{!task.done}}">
<button
style="border: solid 1px red; padding: 20px; border-radius: 20px; display: inline-block;"
on-click="{{ doTask }}"
>Click 2</button>
</template>
</template>
<div>
{{ tasks[0].done }}
</div>
</div>
</template>
<script>
Polymer("my-component", {
tasks: [
{name: "foo", done: false},
{name: "bar", done: true}
],
get remaining() {
return this.tasks.filter(function(t) { return !t.done }).length;
},
doTask: function() {
tmp = this.tasks[0];
tmp.done = true
this.tasks[0] = {};
this.tasks[0] = tmp;
},
observe: {
tasks: 'validate'
},
validate: function(oldValue, newValue) {
}
});
</script>
</polymer-element>
Plunkr はこちら: http://embed.plnkr.co/YgqtKgYRaRTZmoKEFwBy/preview