knockout.js - 如何在 Dukescript 中定义可写的计算 observables?
问题描述
我正在尝试在 Dukescript 上复制示例 1 ,该示例包括修改生成的全名并自动修改数据模型上的名字和姓氏字段。
到目前为止,这是我的代码
HTML:
<div>First name: <span data-bind="text: firstName, valueUpdate: input"></span></div>
<div>Last name: <span data-bind="text: lastName, valueUpdate: input"></span></div>
<div class="heading">Hello, <input data-bind="textInput: fullName, valueUpdate: afterkeydown,event: { keyup: fullName() }
"/></div>
爪哇:
package org.javapro.dukescript;
import net.java.html.json.Model;
import net.java.html.json.ComputedProperty;
import net.java.html.json.Property;
import net.java.html.json.Function;
import java.util.regex.Pattern;
@Model (targetId="",className = "WritableComputed", properties = {
@Property (name = "firstName", type=String.class)
,@Property (name = "lastName", type=String.class)
})
class MyClass {
@ComputedProperty static String fullName(String firstName, String lastName) {
return firstName + " " + lastName;
}
@Function
static void fullName(WritableComputed model, String value) {
int lastSpacePos = value.lastIndexOf(" ");
// Ignore values with no space character
if (lastSpacePos > 0) {
// Update "firstName"
model.setFirstName(value.substring(0, lastSpacePos));
// Update "lastName"
model.setLastName(value.substring(lastSpacePos + 1));
}
}
public static void main(String args[]){
WritableComputed wc = new WritableComputed("hello","world");
wc.applyBindings();
}
}
问题是文本字段只渲染一个js函数
function(c,k){var e=b.ko4j;e&&d.java_lang_Class(!1).toJS(d.org_netbeans_html_ko4j_$JsCallbacks$(!1)._VM().org_1netbeans_1html_1ko4j_1Knockout$call$ILjava_1lang_1Object_12Ljava_1lang_1Object_12__Ljava_lang_Object_2Lorg_netbeans_html_ko4j_Knockout_2ILjava_lang_Object_2Ljava_lang_Object_2(e,a,c ,k))}
先感谢您。
解决方案
事实证明,即使默认计算属性是只读的,您也可以通过在注释上指定一个函数来使它们可编辑,该函数@ComputedProperty
接收数据模型作为参数和将用于变异的数据。
HTML:
<div>First name: <span data-bind="text: firstName, valueUpdate: input"></span></div>
<div>Last name: <span data-bind="text: lastName, valueUpdate: input"></span></div>
<div class="heading">Hello, <input data-bind="textInput: fullName"/></div>
爪哇:
package org.javapro.dukescript;
import net.java.html.json.Model;
import net.java.html.json.ComputedProperty;
import net.java.html.json.Property;
import net.java.html.json.Function;
import java.util.regex.Pattern;
@Model (targetId="",className = "WritableComputed", properties = {
@Property (name = "firstName", type=String.class)
,@Property (name = "lastName", type=String.class)
})
class MyClass {
@ComputedProperty(write="setFullName")
static String fullName(String firstName, String lastName) {
return firstName + " " + lastName;
}
static void setFullName(WritableComputed model, String value) {
int lastSpacePos = value.lastIndexOf(" ");
// Ignore values with no space character
if (lastSpacePos > 0) {
// Update "firstName"
model.setFirstName(value.substring(0, lastSpacePos));
// Update "lastName"
model.setLastName(value.substring(lastSpacePos + 1));
}
}
public static void main(String args[]){
WritableComputed wc = new WritableComputed("hello","world");
wc.applyBindings();
}
}
推荐阅读
- c - 无法使用 SDL_gfxPrimitive
- javascript - 从用户名从 Firebase 获取 UID
- flutter - 为什么 Ad Mob 在 Flutter 应用中不显示广告?
- xml - 使用 xpath 从 BaseX 中选择所有标题
- c++ - 如何从/向二进制文件C++读取和写入具有动态数组成员的类
- c# - 以编程方式更改 xaml 的内容以更改控件的属性
- javascript - 如何访问 XMLHttpRequest 中的类方法?
- python - 对特定列中二级索引的最后一行中的每个一级索引求和
- android - 如何重新创建 Android 应用程序类?
- java - ATG baseline_update.sh 失败并出现错误:没有数据记录输出