MAIBILAI

javascript - knockout.js - 模态的延迟数据绑定(bind)?

coder 2024-05-09

我正在使用 knockout.js 来显示员工列表。我在页面上有一个隐藏的模态标记。单击单个员工的“详细信息”按钮时,我想将该员工数据绑定(bind)到模式弹出窗口。我正在使用 ko.applyBindings(employee, element) 但问题是当页面加载时,它期望模态开始时绑定(bind)到某些东西。

所以我想知道,是否有进行延迟/延迟数据绑定(bind)的技巧/策略?我查看了虚拟绑定(bind),但文档的帮助不够。

谢谢!

最佳答案

我想提出一种在 MVVVM 中使用模态的不同方法。在 MVVM 中,ViewModel 是 View 的数据,而 View 负责 UI。如果我们检查这个提案:

this.detailedEmployee = ko.observable({}),

var self = this;
this.showDetails = function(employee){
    self.detailedEmployee(employee);
    $("#dialog").dialog("show"); //or however your dialog works
}

我非常同意 this.detailedEmployee = ko.observable({}),但我非常不同意这一行:$("#dialog").dialog("显示");。这段代码放在 ViewModel 中并显示模态窗口,实际上这是 View 的责任,所以我们搞砸了 MVVM 方法。我会说这段代码将解决您当前的任务,但它可能会在未来引起很多问题。

  • 关闭弹出窗口时,您应该将 detailedEmployee 设置为 undefined 以使您的主 ViewModel 处于一致状态。
  • 关闭弹出窗口时,您可能希望进行验证,并在您希望在应用程序中使用另一个模式的组件时放弃关闭操作

对于我来说,这几点非常关键,所以我想提出一个不同的方式。如果我们“忘记”您需要在弹出窗口中显示数据,将 绑定(bind)可以解决您的问题。

this.detailedEmployee = ko.observable(undefined);
var self = this;
this.showDetails = function(employee){
    self.detailedEmployee(employee);
}

<div data-bind="with: detailedEmployee">
Data to show
</div>

如您所见,您的 ViewModel 对如何数据应该如何显示一无所知。它只知道应该显示的数据with 绑定(bind)将仅在定义了 detailedEmployee 时显示内容。接下来,我们应该找到一个类似于 with 的绑定(bind),但它会在弹出窗口中显示内容。我们将其命名为 modal。它的代码是这样的:

ko.bindingHandlers['modal'] = {
    init: function(element) {
        $(element).modal('init');
        return ko.bindingHandlers['with'].init.apply(this, arguments);
    },
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        var returnValue = ko.bindingHandlers['with'].update.apply(this, arguments);

        if (value) {
            $(element).modal('show');
        } else {
            $(element).modal('hide');
        }

        return returnValue;
    }
};

如您所见,它在内部使用 with 插件,并根据传递给绑定(bind)的值显示或隐藏弹出窗口。如果已定义 - '显示'。如果不是-“隐藏”。它的用法如下:

<div data-bind="modal: detailedEmployee">
    Data to show
</div>

您唯一需要做的就是使用您最喜欢的模态插件。我用 Twitter Bootstrap 弹出组件准备了一个示例:http://jsfiddle.net/euvNr/embedded/result/

在这个例子中,自定义绑定(bind)更强大一点;您可以订阅 onBeforeClose 事件并在需要时取消此事件。希望这会有所帮助。

关于javascript - knockout.js - 模态的延迟数据绑定(bind)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10626780/

有关javascript - knockout.js - 模态的延迟数据绑定(bind)?的更多相关文章

  1. c# - 在运行时切换 wpf 资源字典 - 2

    我正在尝试构建一个允许用户在运行时更改主题的wpf应用程序。到目前为止,我所做的是创建一个资源字典,其中定义了应用程序的所有颜色,然后我在xaml中绑定(bind)到这个字典。下面是我用来切换资源字典的代码:if(System.IO.File.Exists(fileName)){using(FileStreamfs=newFileStream(fileName,FileMode.Open)){ResourceDictionarydic=(ResourceDictionary)XamlReader.Load(fs);Resources.MergedDictionaries.Clear()

  2. c# - 使用 Web API 的模型绑定(bind)接口(interface)属性 - 2

    我有一个看起来像这样的命令:publicinterfaceICommand{//Justamarkerinterface}publicinterfaceIUserAware{GuidUserId{get;set;}}publicclassCreateSomething:ICommand,IUserAware{publicstringTitle{get;set;}publicGuidUserId{get;set;}}REST请求是:PUT/createHTTP/1.1UserId:7da6f9ee-2bfc-70b1-f93c-10c950c8f6b0//PossibleanAuthto

  3. c# - 数据集的插入/删除/修改的正确顺序是什么? - 2

    TheMSDNclaimsthattheorderis:子表:删除记录。父表:插入、更新和删除记录。子表:插入和更新记录。我对此有疑问。例子:ParentTable有两条记录parent1(Id:1)和parent2(Id:2)ChildTable有一条记录child1(Id:1,ParentId:1)如果我们更新child1以拥有一个新的父parent2,然后我们删除parent1。我们在子表中没有要删除的内容我们删除parent1:我们打破了约束,因为child仍然依附于parent1,除非我们先更新它。那么什么是正确的顺序,MSDN在这个问题上是错误的吗?我个人的想法是子表:删除

  4. c# - 在 WebRequest 中发送压缩数据? - 2

    我的C#应用程序将大量数据(~100k)发送到安装了mod_gzip的Apache服务器。我尝试首先使用System.IO.Compression.GZipStream对数据进行gzip压缩。PHP接收原始gzip数据,因此Apache没有像我预期的那样解压缩它。我错过了什么吗?System.Net.WebRequestreq=WebRequest.Create(this.Url);req.Method=this.Method;//"post"req.Timeout=this.Timeout;req.ContentType="application/x-www-

  5. c# - Entity Framework 5 查询中的错误数据类型 - 2

    我们在我们的业务解决方案中使用EF5.0作为我们的ORM的选择,它以n层方式构建,所有内容都解耦,并且使用ninject有一个很好的组合根。最近,我们一直在构建一个在底层使用分区的数据库,我们在DATE列上有一些重要的索引。列在SqlServer2008上正确声明。我们还在EF映射中添加了正确的数据类型,使用HasColumnType("Date")指令。仍然,当通过LinqtoEntities查询表时,我们过滤日期的参数是DateTime2类型的,甚至列都被转换为DateTime2查询,以便类型与参数匹配。这种行为有几个问题。首先,如果我告诉EF引擎数据库中的列是DATE,为什么要将

  6. c# - 我的绑定(bind)源是否可以告诉我是否发生了更改? - 2

    我有一个BindingSource我在winforms数据绑定(bind)中使用的,我希望在用户对数据进行更改后尝试关闭表单时得到某种提示。一种“您确定要退出而不保存更改吗?”我知道我可以通过BindingSource的CurrencyManager.ItemChanged来做到这一点只需翻转“已更改”bool值即可发生事件。但是,我想要更强大的功能。我想知道当前数据何时与原始数据不同。事件只是告诉我是否发生了某些变化。用户仍然可以更改属性,点击撤消,我仍然认为要保存的数据发生了变化。我想模仿记事本的类似功能打开记事本输入内容删除所有内容(基本上撤销您所做的)关闭记事本,记事本关闭,不

  7. c# - 从 wcf 绑定(bind) transferMode 从 "Buffered"更改为 "Streamed"是否被视为客户端的重大更改? - 2

    我有一个WCF服务端点,它通过流提供二进制文档。端点看起来像这样:publicStreamGetFile(intfileId){...}此服务端点的basicHttpBinding被错误地配置为使用TransferMode="Buffered"。服务端点当前由我无法控制的集成方使用。由于缓冲传输模式的内存消耗问题,我想将其更改为TransferMode="Streamed"。我能否安全地对服务绑定(bind)配置进行此更改,并期望这不会对任何集成方造成任何影响? 最佳答案 据我所知,WCF流模式传输是在客户端选择加入的,这意味着即使

  8. c# - 如何在移动设备上管理大量数据 - 2

    我目前正在实现日语词典,想了解如何快速高效地查找条目的一些想法。字典条目本身被加载并存储在一个类中,该类包含日语单词(可能有多种拼写)、它们的语音发音和英语定义作为三个列表。我最初有一个树结构,每个节点代表一个单词中的一个字符。它非常快,但不幸的是使用了很多内存。定义数据本身约为35meg,树结构本身约为130meg。此外,它也只允许从日语->英语查找。内存是一个问题,因为除了需要额外的索引外,还打算存在一个WindowsPhone7版本的应用程序。该词典包含150,000个条目。总而言之,这就是我需要做的:存储定义列表此列表中有三个索引,用于日语、语音和英语含义。查找速度快(最好少于

  9. c# - Azure 服务总线中继 - 启用压缩 - 2

    我们在将Azure服务总线中继与netTcpRelayBinding和basicHttpRelayBinding一起使用时遇到速度问题。对于较小的消息大小(10K),中继以低延迟运行(100ms),但随着消息大小的增加(100K),我们会遇到看似随机的响应时间(600ms-1000ms)。我们希望改善较大消息的延迟成本。服务总线中继是否支持使用消息压缩(gzip、protobuf-net等)?有没有人成功地通过中继启用请求/响应压缩?这是trivialtosupportresponsecompressionthroughIIS,但我们希望支持请求压缩以改善我们的延迟成本。由于我们无法使

  10. c# - 如何将 SURF 兴趣点与图像数据库匹配 - 2

    我在C#(OpenSurf)中使用SURF算法从图像中获取兴趣点列表。这些兴趣点中的每一个都包含一个描述符向量、一个x坐标(int)、一个y坐标(int)、比例(float)和方向(float)。现在,我想将一个图像的兴趣点与数据库中的图像列表进行比较,该列表也有一个兴趣点列表,以找到最相似的图像。即:[Image(I.P.)]COMPARETO[ListofImages(I.P.)]。=>最佳匹配。单独比较图像会产生不令人满意的结果。在搜索stackoverflow或其他站点时,我发现的最佳解决方案是构建FLANN索引,同时跟踪兴趣点的来源。但在实现之前,我有一些让我感到困惑的问题:

随机推荐

  1. c# - 如何在 EF Core 中实例化 DbContext - 2

    我还设置了.net核心项目和数据库上下文。但是由于这个错误,我还不能开始使用dbContext-"thereisnoargumentgiventhatcorrespondstotherequiredformalparameter'options'"Controller:publicIActionResultIndex(){using(vardb=newBlexzWebDb()){}returnView();}数据库上下文代码:publicclassBlexzWebDb:DbContext{publicBlexzWebDb(DbContextOptions

  2. c# - 命名空间 'Linq' 中不存在类型或命名空间名称 'System' - 2

    这个问题在这里已经有了答案:Thetypeornamespacename'Linq'doesnotexistinthenamespace'System'(10个答案)关闭5年前。当我想使用按钮在C#中编写代码时,它不会转到“.cs”文件来编写C#代码。当我检查项目源时,我发现了这个错误:usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.Web;usingSystem.Web.UI;usingSystem.Web.UI.WebControls;SeverityC

  3. c# - 如何删除 WPF 标签中文本周围的边距? - 2

    我正在尝试用标签制作一个小虚拟键盘。以下是我在XAML中的键盘(但不仅仅是3个键):<StackPanelOrientation="Vertical"><StackPanelOrientation="Horizontal"HorizontalAlignment="Center"><BorderBorderThickness="1"BorderBrush="DarkGray"><LabelContent="A"FontSize="12"

  4. c# - C# 如何反转字节数组的顺序? - 2

    如何在C#中反转字节数组的顺序? 最佳答案 您可以使用Array.Reverse方法:byte[]bytes=GetTheBytes();Array.Reverse(bytes,0,bytes.Length);或者,您始终可以使用LINQ并执行以下操作:byte[]bytes=GetTheBytes();byte[]reversed=bytes.Reverse().ToArray(); 关于c#-C#如何反转字节数组的顺序?,我们在StackOverflow上找到一个类似的问题:

  5. c# - 如何使用 LINQ 执行不区分大小写的 GUID 比较? - 2

    在下面的代码中,我想比较两个GUID。问题是我没有返回任何任务,因为GUID的大小写不同(大写与小写)。我需要执行不区分大小写的比较。MembershipUsermembershipUser=Membership.GetUser();stringstrUserId=membershipUser.ProviderUserKey.ToString();GuiduserId=newGuid(strUserId.ToUpper());lblUserId.Text=userId.ToString();DataModelEntitiesdc=newDataModelEntities();varus

  6. c# - 如何访问嵌套类的私有(private)成员? - 2

    背景:我已经将(父)类E和嵌套类N封闭起来,并在E中包含多个N实例。在封闭的(父)类中,我正在做一些计算,并为嵌套类的每个实例设置值。像这样:n1.field1=...;n1.field2=...;n1.field3=...;n2.field1=...;...这是一个很大的eval方法(在父类中)。我的意图是——因为所有计算都在父类中(它们不能在每个嵌套实例中完成,因为它会使代码更复杂)——使setter仅对父类可用,而getter公开。现在有一个问题:当我将setter设为私有(private)时,父类无法访问它们当我将它们公开时,每个人都可以改变这些值C#没有友元概念我无法在构造函

  7. C#:与 null 比较 - 2

    这些是否等价:if(null==myobject){//dosomething}和if(myobject==null){//dosomething}或者他们会产生不同的代码吗? 最佳答案 在99%的情况下,此代码是等效的。一个异常(exception)是当相关对象的类型覆盖==运算符时。==中可能引入了一个错误,当一个参数为null时会导致问题。我以前见过的一个具体例子如下publicstaticbooloperator==(Studentleft,Studentright){returnleft.Equals(right);}当n

  8. c# - 比较两个列表<string>之间的差异 - 2

    我正在尝试检查两个List<string>之间的区别在c#.例子:List<string>FirstList=newList<string>();List<string>SecondList=newList<string>();FirstList填充有以下值:FirstList.Add("COM1");FirstList.Add("COM2");SecondList填充有以下值:SecondList.Add("COM1");SecondList.Add("COM2"

  9. C# - For vs Foreach - 巨大的性能差异 - 2

    我正在对一种算法进行一些优化,该算法在给定数组中找到大于X的最小数字,但后来我偶然发现了一个奇怪的差异。在下面的代码中,“ForeachUpper”以625毫秒结束,而“ForUpper”以我相信的几个小时结束(非常慢)。为什么会这样?classTeste{publicdoubleValor{get;set;}publicTeste(doubled){Valor=d;}publicoverridestringToString(){return"Teste:"+Valor;}}privatestaticIEnumerable<Teste>GetTeste(do

  10. c# - EF中的跨数据库查询 - 2

    EntityFramework中有什么方法可以实现跨数据库查询吗?假设我有两个实体User和Post,User实体在database1中,而Post在database2中,这意味着这些实体在不同的数据库中。我应该如何在EntityFramework中获取用户的帖子? 最佳答案 我知道这是一个老问题,但这实际上是可能的。如果数据库位于同一台服务器上,那么您需要做的就是使用DbCommandInterceptor。例如,如果我将DbCommandInterceptor附加到MyContext,我可以拦截所有命令执行并将查询中的指定表替换