Javascript 如何获得敲除同级数据绑定属性

更新：请参阅下面的JSFIDLE链接

再次更新-请参阅更新2

我有以下HTML：

<button type="button" data-who="Appellant" data-bind="click: showLetter, hasFlag: { value: DeterminationLettersGenerated, flag: Enum_AppealParties.Appellee, enableIfTrue: true }">View</button>

所谓同级，我指的是绑定的实际点击事件的同级。我只需要得到任何能让我得到的

Enum\u appelparties.Appellee

我尝试了多种组合，包括

ko.toJS

、

ko.toJSON

、

$.parseJSON

和

JSON.stringify

。他们总是返回一个包含引号或转义引号的字符串：

click: showLetter, hasFlag: { value: DeterminationLettersGenerated, flag: Enum_AppealParties.Appellee, enableIfTrue: true }

我需要的是将上述字符串转换为JSON，因此最坏情况下，我需要在代码中执行以下操作：

self.showLetter = function (model, event) {
  var magicObject = SomeAwesomeAnserHere();
  var flagValue = magicValue.hasFlag.flag;
  ...
}

更新： 如果您想要查看it回购协议，请查看此链接 只需单击中的查看按钮，就会显示一些警告消息。说“应该说对象”的那个说它是一个字符串。我不确定我上面提到的这些组合是正确的还是正确的。只想了解数据绑定元素的每一部分

更新2: 我知道KO必须做我想做的事，对吗？因此，在对KO代码进行了深入研究之后，我看到了它将数据绑定字符串转换为可用对象（在本例中是函数）的地方。我很快就能让它在我自己的绑定/函数中变得有用。这还不是100%有效。但也许有比我更聪明的人在修补它

此代码位于类似上述self.showLetter的KO.click事件中：

var rewrittenBindings = ko.expressionRewriting.preProcessBindings($(event.target).data("bind"), null);
var functionBody = "with($context){with($data||{}){return{" + rewrittenBindings + "}}}";
var almost = new Function("$context", "$element", functionBody);

---

在这个类似的问题中，最终没有一个好的答案：

很明显，访问此信息的唯一方法是通过解析数据绑定属性。下面是fiddle的更新版本，展示了如何解析嵌套的bind语句以获得所需的内容：

这是执行分析的代码：

self.showLetter = function (model, event) {
    var binding_info = {}
    var binding_attr = $(event.target).attr("data-bind")
    var indent = false, indent_key = "";
    $(binding_attr.split(",")).each(
        function(idx, binding) {
            var parts = binding.split(":")
            var key = parts[0].trim()
            var val = parts[1].trim()
            if (val.indexOf("{") != -1) {
                binding_info[key] = {}
                indent = true
                indent_key = key
            }
            if (indent == true) {
                binding_info[indent_key][key] = val.replace("{", "").replace("}", "").trim()
            }
            else {
                binding_info[key] = val
            }
            if (val.indexOf("}") != -1) {
                indent = false
                indent_key = ""
            }
        }
    )    
    console.log(binding_info.hasFlag.flag)
}

最后，binding_info就是你想要的

更新：

---

上面的链接问题略有不同，因为它从另一个视图模型和给定的DOM元素开始，它说，我可以获得该DOM元素的绑定吗？它排除了自定义绑定。然而，在这个例子中，自定义绑定已经在使用中，因此Michael Best在下面的帖子中提供了一个没有自定义解析代码的更简洁的答案，并证明了我的断言不正确，即自定义解析是唯一的方法

在这个类似的问题中，最终没有一个好的答案就失败了：

很明显，访问此信息的唯一方法是通过解析数据绑定属性。下面是fiddle的更新版本，展示了如何解析嵌套的bind语句以获得所需的内容：

这是执行分析的代码：

self.showLetter = function (model, event) {
    var binding_info = {}
    var binding_attr = $(event.target).attr("data-bind")
    var indent = false, indent_key = "";
    $(binding_attr.split(",")).each(
        function(idx, binding) {
            var parts = binding.split(":")
            var key = parts[0].trim()
            var val = parts[1].trim()
            if (val.indexOf("{") != -1) {
                binding_info[key] = {}
                indent = true
                indent_key = key
            }
            if (indent == true) {
                binding_info[indent_key][key] = val.replace("{", "").replace("}", "").trim()
            }
            else {
                binding_info[key] = val
            }
            if (val.indexOf("}") != -1) {
                indent = false
                indent_key = ""
            }
        }
    )    
    console.log(binding_info.hasFlag.flag)
}

最后，binding_info就是你想要的

更新：

---

上面的链接问题略有不同，因为它从另一个视图模型和给定的DOM元素开始，它说，我可以获得该DOM元素的绑定吗？它排除了自定义绑定。然而，在这个例子中，自定义绑定已经在使用中，因此Michael Best在下面的帖子中提供了一个没有自定义解析代码的更简洁的答案，并证明了我的断言不正确，即自定义解析是唯一的方法

在这个类似的问题中，最终没有一个好的答案就失败了：

很明显，访问此信息的唯一方法是通过解析数据绑定属性。下面是fiddle的更新版本，展示了如何解析嵌套的bind语句以获得所需的内容：

这是执行分析的代码：

self.showLetter = function (model, event) {
    var binding_info = {}
    var binding_attr = $(event.target).attr("data-bind")
    var indent = false, indent_key = "";
    $(binding_attr.split(",")).each(
        function(idx, binding) {
            var parts = binding.split(":")
            var key = parts[0].trim()
            var val = parts[1].trim()
            if (val.indexOf("{") != -1) {
                binding_info[key] = {}
                indent = true
                indent_key = key
            }
            if (indent == true) {
                binding_info[indent_key][key] = val.replace("{", "").replace("}", "").trim()
            }
            else {
                binding_info[key] = val
            }
            if (val.indexOf("}") != -1) {
                indent = false
                indent_key = ""
            }
        }
    )    
    console.log(binding_info.hasFlag.flag)
}

最后，binding_info就是你想要的

更新：

---

上面的链接问题略有不同，因为它从另一个视图模型和给定的DOM元素开始，它说，我可以获得该DOM元素的绑定吗？它排除了自定义绑定。然而，在这个例子中，自定义绑定已经在使用中，因此Michael Best在下面的帖子中提供了一个没有自定义解析代码的更简洁的答案，并证明了我的断言不正确，即自定义解析是唯一的方法

在这个类似的问题中，最终没有一个好的答案就失败了：

很明显，访问此信息的唯一方法是通过解析数据绑定属性。下面是fiddle的更新版本，展示了如何解析嵌套的bind语句以获得所需的内容：

这是执行分析的代码：

self.showLetter = function (model, event) {
    var binding_info = {}
    var binding_attr = $(event.target).attr("data-bind")
    var indent = false, indent_key = "";
    $(binding_attr.split(",")).each(
        function(idx, binding) {
            var parts = binding.split(":")
            var key = parts[0].trim()
            var val = parts[1].trim()
            if (val.indexOf("{") != -1) {
                binding_info[key] = {}
                indent = true
                indent_key = key
            }
            if (indent == true) {
                binding_info[indent_key][key] = val.replace("{", "").replace("}", "").trim()
            }
            else {
                binding_info[key] = val
            }
            if (val.indexOf("}") != -1) {
                indent = false
                indent_key = ""
            }
        }
    )    
    console.log(binding_info.hasFlag.flag)
}

最后，binding_info就是你想要的

更新：

---

上面的链接问题略有不同，因为它从另一个视图模型和给定的DOM元素开始，它说，我可以获得该DOM元素的绑定吗？它排除了自定义绑定。然而，在这个例子中，自定义绑定已经在使用中，因此Michael Best在下面的帖子中提供了一个没有自定义解析代码的更简洁的答案，并证明了我的断言不正确，即自定义解析是唯一的方法

要访问同级绑定，需要定义自定义绑定。定义这样一个简单地包装

点击

绑定的绑定非常简单：

ko.bindingHandlers.clickFlag = {
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        ko.applyBindingAccessorsToNode(element, {
            click: function() {
                return function(model, event) {
                    valueAccessor().call(this, model, event, allBindings.get('hasFlag'));
                }
            }
        }, bindingContext);
    }
}

---

要访问同级绑定，需要定义自定义绑定。定义这样一个简单地包装

点击

绑定的绑定非常简单：

ko.bindingHandlers.clickFlag = {
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        ko.applyBindingAccessorsToNode(element, {
            click: function() {
                return function(model, event) {
                    valueAccessor().call(this, model, event, allBindings.get('hasFlag'));
                }
            }
        }, bindingContext);
    }
}

---

要访问同级绑定，需要定义自定义绑定。定义这样一个简单地包装

点击

绑定的绑定非常简单：

ko.bindingHandlers.clickFlag = {
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        ko.applyBindingAccessorsToNode(element, {
            click: function() {
                return function(model, event) {
                    valueAccessor().call(this, model, event, allBindings.get('hasFlag'));
                }
            }
        }, bindingContext);
    }
}

---

要访问同级绑定，需要定义自定义绑定。定义这样一个简单地包装

点击

绑定的绑定非常简单：

ko.bindingHandlers.clickFlag = {
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        ko.applyBindingAccessorsToNode(element, {
            click: function() {
                return function(model, event) {
                    valueAccessor().call(this, model, event, allBindings.get('hasFlag'));
                }
            }
        }, bindingContext);
    }
}

---

为什么不将其附加到单击处理程序中

<button type="button" data-who="Appellant" data-bind="click: function() {showLetter($data,Enum_AppealParties.Appellee);}">View</button>

视图

不过，我同意之前的海报。这应该是模型的一部分。

为什么不只是ap