这是我尝试用Polymer做的一种模式:
<link rel="import" href="/bower_components/polymer/polymer.html" />
<link rel="import" href="/bower_components/iron-ajax/iron-ajax.html" />
<link rel="import" href="/bower_components/iron-input/iron-input.html" />
<dom-module id="my-entity">
<template>
<iron-ajax auto url="{{urlGet}}" handle-as="json" last-response="{{entity}}"></iron-ajax>
<iron-ajax id="updateEntityCall" url="{{urlUpdate}}" handle-as="json" on-response="handleUpdateResponse"></iron-ajax>
<div>
<div class="input-wrapper">
<label>Name : </label>
<input is="iron-input" bind-value="{{entityName}}" value="{{entity.name}}" />
</div>
<div>
<button on-click="saveEntity">Save</button>
</div>
</div>
</template>
<script>
Polymer(
{
is: "my-entity",
properties: {
entityid: {
notify: true
},
entityName: {
notify: true
}
urlGet: {
computed: 'getUrlGet(entityid)'
},
urlTemplate: {
computed: 'getUrlUpdate(entityid, entityName)'
},
},
getUrlGet: function (entityId) {
return ['/path/to/get', entityId].join('/');
},
getUrlUpdate: function (entityId, entityName) {
return ['/path/to/update', entityId, entityName].join('/');
},
saveEntity: function (e, detail, sender) {
this.$.updateEntityCall.generateRequest();
}
}
);
</script>
</dom-module>
我首先创建一个iron-ajax
来获取实体的一些数据。这将打印在iron-input
元素中,以便一个人能够更新此实体。
iron-ajax
绑定到{{entity}}
元素(value
)中iron-input
使用的entity.name
变量。我创建了一个名为entityName
的属性,该属性将绑定到同一bind-value
的{{1}}属性。
有人做出更改后,目标是他/她点击调用函数iron-input
的{{1}},它基本上会调用另一个button
元素。
当有人实际更改saveEntity
的值时,此代码没有问题。 当用户不更改值并单击按钮时,会出现问题。它没有发送任何内容,例如未设置iron-ajax
。
这是一个简单的例子,在我的用例中我有3个字段,其中2个可以有#34;空字符串&#34;作为有效值。