修改

Question

我一直在寻找，我发现了一些类似于我的问题，但没有一个与我想要做的完全匹配（或者至少，解决方案对我没用）。我是Durandal的新手，所以我不知道从哪里开始实现这一目标。我正在开发一个测试应用程序，我有一个数据绑定的div来显示html，如下所示：

视图上的数据绑定

<div class="active-document-text" id="document-text" data-bind="html: documentBody">

在视图模型的javascript中，我让它使用AJAX调用获取外部HTML文件。它工作正常，并正确绑定到视图，显示文档。我的问题是外部HTML也会有一个或多个数据绑定：

External.html

Lorem ipsum dolor 
<div class="selectable" id="selectable-1"
 data-bind="event: { click: $parent.onmouseClick }" >
sit amet, consectetur adipiscing</div> elit.
Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
Sed nisi. Nulla quis sem at nibh elementum imperdiet.

我想知道如何设置它以便将这些实例数据绑定到当前的viewmodel以进行处理。我们的想法是拥有一个可选择的文本区域（简单的鼠标悬停突出显示），并将其与当前选定的索引进行比较。一个更简单的解释是，它类似于提供句子的用户，用户点击名词类别，然后在句子中选择名词。如上例所示，可选区域可以是文本中的任何位置。我已经能够让它渲染所有的html，但是在使数据绑定工作方面却没有成功。我已经尝试按照knockout data-bind on dynamically generated elements在它之后应用ko.applyBindings（），但我会收到一个未定义的路由器错误，我也尝试过创建一个传递像inserting dynamic html into durandal views这样的数据的组合看起来外部的html会拥有它自己的.js模型/ viewmodel。我完全错误地采取了这种方式吗？或许过度复杂化了吗？最初，我们把它分解成一个模型，其中每个文本部分都有一个可选择的属性，但它真的很笨重地分解了大量的文档和HMTL格式化的噩梦，所以我试图找到一个更优雅的解决方案。感谢您的帮助！

修改

以下问题扩展了这个问题： 为了将事件绑定合并到外部html文件中所需的long div标签对于可能是文档创建者的非开发人员来说并不友好。我现在再次使用AJAX调用抓取html文件然后用长div标签替换一个简单的自定义'[selectable]'标签并将其存储在一个observable中，但我仍然不确定如何将其与绑定到当前视图。

以下是尝试使其正常工作的当前外观。我在特别重要的行的开头添加了双星号。

视图：

<h3 data-bind="html: displayName"></h3>
<div class="document-analysis document-analysis-border">
    <span class="title-bar">Analyze Documents</span>
    <img src="./assets/images/arrow_minimize.jpg" class="minimize-button" />
    <div class="container">
        <div class="document-bar">
            <span class="title">Documents to Analyze</span><br />
            <img class="arrow-up" src="./assets/images/arrow_up.jpg" alt="Up Arrow" />
            <div data-bind="foreach: documentData()" class="documents scroll-bar">
                **<div data-bind="event: { click: function () { $parent.changeDocument($data); } }, attr: { id: 'document-' + id }" class="document">
                    <img data-bind="attr: { alt: title }" src="./assets/images/document_image.gif" class="document-image" />
                    <span data-bind="text: title" class="document-name"></span>
                </div>
            </div>
            <img class="arrow-down" src="./assets/images/arrow_down.jpg" alt="Down Arrow" />
        </div>
        <div class="inner-container">
            <div class="active-document">
                **<!--<div class="scroll-bar text" id="document-text" data-bind="compose: { view: currentDocument().url, transition: 'entrance' }"></div>-->
                **<div class="scroll-bar text" id="document-text" data-bind="compose: { view: documentFormatted, transition: 'entrance' }"></div>
                <button class="submit">Submit</button>
            </div>
            <div data-bind="foreach: bucketData()" class="buckets">
                <div data-bind="event: { click: function () { $parent.changeBucket($data); } }" class="bucket">
                    <img data-bind="attr: { id: 'bucket-' + id, src: image, alt: title }" src="//:0" class="bucket-image" />
                    <span data-bind="text: title" class="bucket-name"></span>
                </div>
            </div>
        </div>
    </div>
</div>

第一个标记的行在单击新文档时调用changeDocument（）函数。第二行和第三行是尝试使外部文档工作。注释掉的组合工作正常，但我必须使用长标签以便于在mouseOver和mouseOut上突出显示文本。点击主要用于此刻的调试。如果他们单击其中一个存储桶（类别），然后单击外部文档中的可选区域，则会检查数据，如果他们为文本选择选择了正确的类别，则会获得积分。

以下是相关的viewmodel信息：

var vm = {
        displayName: 'Document Analysis',
        currentDocument: ko.observable(docAnalysisObj.documents[0]),
        documentData: ko.observableArray(docAnalysisObj.documents),
        documentFormatted: ko.observable(),

        $init: $init,
        activate: activate,
        onmouseOver: onmouseOver,
        onmouseOut: onmouseOut,
        mouseClick: mouseClick,
        changeDocument: changeDocument,
        canDeactivate: canDeactivate,
        viewAttached: viewAttached
    };
    return vm;

function changeDocument(newDocument) {
        var self = this;
        // If they clicked the same document, ignore and return
        if (!newDocument || (self.currentDocument() && self.currentDocument().id === newDocument.id)) {
            return;
        }

        // Set the id selector name
        var docElementSelector = '#document-' + newDocument.id;

        // Remove the highlight from the previous class if it exists
        if (self.currentDocument()) {
            $('#document-' + self.currentDocument().id).removeClass('document-selected');
        }
        // Set the document to the new one
        self.currentDocument(newDocument);
        // Use data service to pull the html into self.documentFormatted
        dataservice.getDocument(self.documentFormatted, self.currentDocument().url);

        // Highlight the new current document
        $(docElementSelector).addClass('document-selected');

    }

mouseOver和mouseOut实际上只是在鼠标悬停在可选区域时添加和删除CSS类。 changeDocument（）是我尝试使用以下dataservice对象加载html并处理CSS更改。

Dataservice对象：

var getDocument = function (documentObservable, url) {
        documentObservable([]);

        if (!url) {
            console.log('Error: No url provided for document');
            documentObservable('<h1>Error: Document Not Found</h1>Document source was undefined.');
            return;
        }

        url = './app/views/' + url;

        var options = {
            url: url,
            type: 'GET',
            dataType: 'html',
            cache: false,
            error: queryFailed
        };

        return $.ajax(options)
            .then(querySucceeded);

        function querySucceeded(data) {
            console.log('Document \'' + url + '\' retrieval succeeded.');
            documentObservable(data);

            var currentID = 1;
            while (documentObservable().match(/\[selectable\]/g)) {
                documentObservable(documentObservable().replace('[selectable]', '<div class="selectable" selectID="' + currentID + '" data-bind="event: { mouseover: function () { $root.onmouseOver(' + currentID + '); }, mouseout: function () { $root.onmouseOut(' + currentID + '); }, click: function () { $root.mouseClick(' + currentID + '); } }">'));
                currentID++;
            }
        }

        function queryFailed(jqXHR, textStatus) {
            console.log('Error getting document ' + url + ': ' + textStatus);
            documentObservable('<h1>Error: Document Not Found</h1>' + textStatus);
        }

    };

数据服务是这方面的佼佼者。它加载html并将所有出现的[selectable]替换为将用于数据绑定的long标记。我还没有实现结束标签的替换，但这很简单。 div使用自定义属性selectID而不是ID的原因是因为老板说使用ID是个坏主意，因为它们可以在文档中重复，而自定义属性不太可能发生。

示例文档：

[selectable]
            &bull; This is a sample selectable area. This will be highlighted<br />
            when someone mouses over it.
            <br />[/selectable]

长div已被[selectable]标签取代，以便具有基本HTML技能的人更容易构建示例文档。

最终，目标是为创建文档的人提供一个易于使用的标记，而不必尝试粘贴长标记并跟踪其个人ID。我想将鼠标事件与视图模型联系起来，因为它是完全相同的活动（并且所有文档的点将被计算在一起以获得最终得分）。从用户的角度来看，当他们将鼠标悬停在可选文本上时，它应该只是改变颜色（简单的jQuery）。如果他们点击它，它将检查他们是否选择了正确的类别（我已经有了这个工作）。我目前的问题是进行文本替换，并能够将事件绑定到视图的函数。

Answer 1

我不会使用knockoutjs html绑定。

而是使用durandals组合绑定以将新元素插入到dom中。 Durandal也将为您处理绑定。

看到这篇文章： http://durandaljs.com/documentation/Using-Composition/

在Durandal中进行数据绑定后动态绑定外部html文件

修改

1 个答案: