Kendo MVVM-使用数据显示绑定布局

Question

我正在使用带有 JQuery 的 Kendo UI 来使用 Telerik appBuilder 创建一个跨平台的移动应用程序。

我的问题是关于剑道的可能性。在单独的 HTML 文件中，我有一个布局定义和加载布局的视图。在视图中，我试图让我们 data-show 调用一个函数，该函数将视图链接到的 ViewModel 中的布局绑定到此博客文章中：http://codingwithspike.wordpress.com/2012/12/31/kendo-mobile-gotchas-tips-tricks/

我的问题是：我可以在 View Model 中使用 show 功能，还是必须将 show 功能放在 View Model 之外。无论哪种方式，到目前为止我都未能成功调用该函数。并绑定模型

我正在尝试在布局的页脚中使用该功能，但在将布局绑定到视图模型时遇到问题。

我将包含所涉及的代码，希望能解决任何问题。

这是我的 index.html 文件中的布局

<div data-role="layout" data-id="live-album-layout">
    <header data-role="header">
       <div data-role="navbar">
        <a data-role="backbutton" data-align="left">Back</a>
            <span data-role="view-title"></span>
            <a data-role="button" data-align="right" data-icon="home" href="views/home.html"></a>
        </div>
    </header>
    <footer data-role="footer">
        <div data-role="navbar">
            <a id="capture-button" data-role="button" data-bind="click: capturePhoto" data-align="left">Take Picture</a>
            <a id="get-photo-button" data-role="button" data-bind="click: getPhoto" data-align="right">Add From Library</a>
        </div>
    </footer>
</div>

接下来是我尝试将数据绑定连接到的视图

<div id="livealbumView" data-role="view" data-layout="live-album-layout" 
data-title="Live Album" data-model="app.liveAlbum.viewModel"
data-stretch="true" data-show="app.LiveAlbum._loadLayoutMVVM">
    <div id="album-scroll-view" data-role="scrollview" data-items-per-page="4"
        data-content-height="100%" data-enable-pager="true"
        data-bind="source: galleryDataSource" data-template="scrollview-gallery-template">
    </div>

视图的模板在这个问题中并不重要。我知道它可以工作，而且一旦我解决了这个问题，我还有很多事情要做。

现在，视图模型的 Javascript

(function(global) {
var app = global.app = global.app || {};

var LiveAlbum = kendo.observable({
    currentId: 0,


    _loadLayoutMVVM: function() {
        alert("bound");
        kendo.bind($("#live-album-layout"), this);
    },


    onPhotoURISuccess: function(imageURI) {
        setTimeout( function() {
        LiveAlbum.addPicture(imageURI);
       }, 0);
    },
    capturePhoto: function() {
        // Take picture using device camera and retrieve image as base64-encoded string
        navigator.camera.getPicture(LiveAlbum.onPhotoURISuccess, LiveAlbum.onFail, { quality: 45,
            destinationType: Camera.DestinationType.FILE_URI,
            saveToPhotoAlbum:true});
    },
    getPhoto: function() {
        // Retrieve image file location from specified source
        navigator.camera.getPicture(LiveAlbum.onPhotoURISuccess, LiveAlbum.onFail, { quality: 45, 
            destinationType: Camera.DestinationType.FILE_URI,
            sourceType: Camera.PictureSourceType.PHOTOLIBRARY });
    },
    onFail: function(message) {
        if (message !== "no image selected") {
        setTimeout(function() {
            alert('Failed because ' + message);
        }, 0);
            }
    },
    galleryDataSource: new kendo.data.DataSource({
         type: "odata",
            transport: {
                read: {
                    url: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
                }
            },
            serverPaging: true,
            pageSize: 30
    }),

    //change this function for uploading to the server
    addPicture: function(src) {
        this.currentId++;
        this.galleryDataSource.add({
            id: this.currentId,
            image_url:src
        })
        this.galleryDataSource.sync();
    }
});

app.liveAlbum = {
    viewModel: LiveAlbum
};

}（窗口））

app.js 只是为了澄清

(function(global) {
var app = global.app = global.app || {};

document.addEventListener("deviceready", function() {
    app.application = new kendo.mobile.Application(document.body, {
        initial: "views/home.html",
        skin: "flat",
        transition: "slide"
    }, false);  
});

})(窗口);

抱歉，“（窗口）；”显然不配合 StackOverflow 的格式。

任何帮助都可以找出剑道的限制，甚至破解解决方案都会有所帮助。

Answer 1

从此代码：

var app = global.app = global.app || {};

var LiveAlbum = kendo.observable({
    _loadLayoutMVVM: function() { ... }
});

app.liveAlbum = {
    viewModel: LiveAlbum
};

看起来您的函数将位于：

app.liveAlbum.viewModel._loadLayoutMVVM

但您的 HTML 包含：

data-show="app.LiveAlbum._loadLayoutMVVM"

---

同样在您的_loadLayoutMVVM 函数中，您正在使用一个按元素 ID 的 jQuery 选择器来定位您的布局：

$("#live-album-layout")

但实际的布局元素没有（也不应该有）ID。不过它确实有一个data-id，所以你可以使用选择器：

$("[data-id='live-album-layout']")

---

您还应该确保只在第一次调用视图的show 事件时才调用kendo.bind()，而不是每次都调用，否则绑定会重复并导致其他奇怪的更新和性能问题。在第一次调用kendo.bind() 之后，通常可以通过将布尔变量设置为true 来执行此操作，如果变量为true，则不要再次调用它

---

希望对您有所帮助，感谢您阅读我的博客！