qooxdoo 值未在 html 小部件中更新

Question

我正在 qooxdoo 上编写一个应用程序。我有一个类，它应该返回包含数据和小部件的表，用户在行信息上单击（与电子邮件客户端中的界面类似）。

然而，html 嵌入小部件中的信息仅在加载时初始化一次，之后就不会改变。如何重写代码以显示用户在 html 小部件中单击的行？ 这是我的代码：

qx.Class.define("bank.InvoiceListBuilder",
{
  extend : qx.core.Object,
  statics:
  {
    createList : function(folder) {

        var box = new qx.ui.layout.VBox();
        box.setSpacing(0);

        var container = new qx.ui.container.Composite(box);
        container.setPadding(0);

        // table construction
            var data = new qx.data.Array;
            var invoice = new qx.data.Array;
            var tableModel = new qx.ui.table.model.Simple();
            tableModel.setColumns([ "id", "status", "name", "surname", "date", "email", "amount", "payexp", "description" ]);
            var rpc = new qx.io.remote.Rpc(
                "http://192.1.1.102/rpc",
                "mylist"
            );
            var handler = function(result, exc) {
              if (exc == null) 
              { 
                data = qx.lang.Json.parse(result);
                tableModel.setData(data);
              } else {
                alert("Exception during async call: " + exc);
              }
            };
            rpc.callAsync(handler, "listings", folder);
            var table = new qx.ui.table.Table(tableModel);
            var rowcontent = function(e)
            {
                var row = table.getFocusedRow();
                invoice = tableModel.getRowData(row);
                console.log(invoice);
            };
            table.addListener('cellClick', rowcontent, this);           
            table.getTableColumnModel().setColumnVisible(1, false);                 
            table.setShowCellFocusIndicator(false);
            table.setHeight(300);
            container.add(table);

            // invoice content view
            var rich = new qx.util.StringBuilder();

            if (invoice[2] == null)
            {
                rich.add("<b>Text</b>");
            } else {
                rich.add("<b>",invoice[2],"</b>");
            }
            var richWidget = new qx.ui.embed.Html(rich.get());
            console.log(rich.get());
            console.log(invoice[3]);
            richWidget.setOverflow("auto", "auto");
            richWidget.setDecorator("main");
            richWidget.setBackgroundColor("white");
            richWidget.setWidth(200);
            richWidget.setHeight(300);          
            container.add(richWidget);

            return(container);
    }
  }

Answer 1

为了让 richWidget 更改其内容，您实际上必须更新它。仅更改数组的值在这里没有任何影响...（如果数组是 qooxdoo Array 对象并且您正在使用数据绑定，则可以...）。无论如何，与您在 rpc 回调中调用 setData 的方式相同，您必须在第二个回调中对丰富的小部件调用 setHtml：

var richWidget = new qx.ui.embed.Html();
var rowcontent = function(e) {
    var row = table.getFocusedRow();
    var invoice = tableModel.getRowData(row);
    var rich = new qx.util.StringBuilder();
    if (invoice[2] == null) {
         rich.add("<b>Text</b>");
    } else {
         rich.add("<b>",invoice[2],"</b>");
    }
    richWidget.setHtml(rich.get());
};

不过还有更多。我建议不要创建静态函数，而是将您的实现基于 qx.ui.container.Composite 小部件，然后使用 newbank.InvoiceList() 实例化您的代码。 （这不会影响功能，但这是“正确的事情”。