Question

到目前为止，我试图动态设置我的视图标题但没有成功。我正在尝试这样的事情：

<div data-role="view"
 id="mt-details-view"
 data-title="#= pageTitle #" <---- this one
 data-layout="mt-main-layout"
 data-init="X.details.onInit"
 data-before-show="X.details.beforeShow"
 data-show="X.details.onShow"
 data-model="X.details.viewModel"
 data-use-native-scrolling="true">

我尝试使用一个函数，尝试设置一个viewModel变量，尝试从view.params传递标题，同时尝试在onShow函数上设置标题：

function onShow(e) {
    X.debug.dbg2(e.view.id, "onShow");
    viewModel.setViewParams(e.view.params);
    e.view.title = e.view.params.pageTitle;
    e.view.options.title = e.view.params.pageTitle;
    fetchSomeDetails();
}

无效。

请赐教！

Answer 1

您可以尝试以下方法。声明viewmodel后，将函数绑定到其'set'方法。在此处，检查正在设置的字段是否是viewmodel上的页面标题属性。如果是，找到包含标题文本的dom元素并将其html设置为'set'值：

X.details.viewModel.bind("set", function(e) {
    if (e.field == "pageTitle") {
        $("#mt-details-view [data-role='view-title']").html(e.value);
  }
})

每当在viewmodel上更改该属性时，您现在将看到它反映在页面上。但是，最初仍然存在在UI中设置值的问题。您可以在onShow函数中执行此操作，当然在渲染视图并创建了所有dom元素后会发生这种情况：

function onShow(e) {
    var temp = viewModel.pageTitle;
    viewModel.set("pageTitle", null);
    viewModel.set("pageTitle", temp);
}

这将强制运行viewmodel上的'set'方法，然后应该更新UI。

kendo ui set view model page data-title dynamic mvvm

1 个答案: