如何在 Dukescript 中定义可写的计算可观察对象？

Question

我正在尝试在 Dukescript 上复制 the example 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>

Java:

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

提前致谢。

Answer 1

事实证明，即使 默认情况下计算属性是只读的，您也可以通过在注释 @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>

Java:

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();
  }
}

如何在 Dukescript 中定义可写的计算可观察对象？

How can I define writable computed observables in Dukescript?

knockout.js

dukescript