使用 Knockout 控制网页：未保存可见更改

Question

正在尝试使用 Excel VBA 编辑网站。编辑似乎有效，但当我使用保存按钮时，没有任何内容被保存。为什么不保存屏幕上可见的更新数据？

此代码在 Internet Explorer 中打开一个网页，导航到我想要的位置，填写数据，所有这些都显示在屏幕上，使用各种方法，例如：

For Each objElement In objElementColl
ExtractedName = objElement.outerHTML
        
If InStr(ExtractedName, "NewPermit") > 0 Then
objElement.Checked = True

和

Set DropDown = objHTML.getElementById("ProjectFile-AccreditedCertifierId")
DropDown.selectedIndex = 1

或

objHTML.getElementsByName(ElementName)(0).Value = ValueCheck

所有工作和更改都显示在屏幕上。我点击保存使用：

Set objElementColl = objHTML.getElementsByClassName("btn")

For Each objElement In objElementColl
    ExtractedName = objElement.outerHTML
    
    If InStr(ExtractedName, "click: save, enable:") > 0 Then
        objElement.Click
        ExtractedName = 1
        Exit For
    End If
Next

哪个运行s。问题是它没有保存上面三个部分的更改。

我试过的

暂停我的代码并手动点击保存（同样的问题）
暂停我的代码，手动更改一个复选框并运行要保存的代码（确实保存手动更改，但不保存编码的
暂停代码并手动更改一个框并手动保存（仅保存手动更改的框）

从上面看，我的保存点击似乎有效，但尽管使用代码明显更改并填充了框，但可见和背景之间存在间隙。

一些HTML源代码。 Chrome 在检查我正在更改的元素时向我显示的是什么：

    <fieldset>
        <legend>Proposal</legend>

        <div class="col-xs-12 col-sm-8 col-md-6">
            <div class="row">
                <div class="col-xs-2 form-group">
                    <label for="ProjectFile_ProposalLot">Lot</label><input class="form-control" data-bind="textInput: ProjectFile().ProposalLot" maxlength="100" name="ProjectFile-ProposalLot" type="text" />
                </div>
                    <div class="col-xs-2 form-group" data-bind="visible: ProjectFile().StateId() != 7 && ProjectFile().StateId() != 5">
                        <label data-bind="text: ProjectFile().ProposalDpLabel()"></label>
                        <input class="form-control" data-bind="textInput: ProjectFile().ProposalDp" maxlength="100" name="ProjectFile-ProposalDp" type="text" />
                        </div>

我搜索了页面的源代码。我相信这可能很重要，但我不是 HTML 编码员。我把它缩短了一点

var ProjectFileEditViewModel=(function(){__extends(ProjectFileEditViewModel,ViewModel.Model);function ProjectFileEditViewModel(){ProjectFileEditViewModel.__super__.constructor.apply(this,arguments);};ProjectFileEditViewModel.prototype.fields=function(){return {"Id":new ViewModel.NumberField(0),"StateId":new ViewModel.NumberField(0),"DefaultOfficeAddressId":new ViewModel.ObservableField(),"Name":new ViewModel.ObservableField(),"ExistingApprovalDate":new ViewModel.DateField("DD/MM/YYYY"),"ProjectClosed":new ViewModel.ObservableField(),"ProposalAddress":new ViewModel.ObservableChildField(exports.AddressViewModel,this),"Zoning":new ViewModel.ObservableField(),"ProposalLot":new return ProjectFileEditViewModel;})();if(exports.ProjectFileEditViewModel==null)exports.ProjectFileEditViewModel=ProjectFileEditViewModel;

还有这个：

Buildaform.model=new Buildaform.ProjectPageViewModel({ ... ,"ProposalLot":null .... }

我认为这最后一个与它有关。不知道能不能换。

不能公开网址和源代码

Answer 1

由于相关网站无法共享，我可以想出一套简单的提示来试试：

如果该网站将实现一个简单的（纯）HTML 表单来发送 POST 请求，您的解决方案就可以了。但是看看你分享的HTML

<label data-bind="text: ProjectFile().ProposalDpLabel()"></label>

data-bind 已经表明数据正在由图书馆获取 collected/sent。（例如 Knockout 正在使用该属性）。该库现在可能会在某处收集数据，并且它可能会被 JavaScript 中的 "click" 或 "key" 事件触发。然后可以按照 GCSDC 的建议将收集到的信息存储在隐藏的 DOM 元素中，或者直接存储在 JavaScript 变量中。

我现在的建议是通过检查 HTML 源代码来找出此页面上使用了哪个 JavaScript 框架。在某个时候应该有一个

<script src="<fancy js framework>.js"></script>

HTML 中的

标签，它应该为您提供框架的名称。（实际上可以有多个这种标签，包括自定义 JavaScript 文件。这些标签不必位于 HTML 文档的开头，可以分散在整个文档中，因此您可能必须在 HTML 文档中搜索 script。其中之一应该是发送请求的主要框架。如果您不确定它是哪个，则必须 google 所有这些并找出来。）

然后，在框架文档的帮助下，研究 POST（也许 Ajax）请求是如何在此页面的 JavaScript 代码中发送的。然后，通过在此页面上的 VBA 执行自定义 JavaScript 来发送请求； post.

中显示了如何做到这一点

或者，您可以尝试在表单输入上触发点击（或按键）事件，让框架相信您确实输入了它； post 中显示了如何做到这一点，但这可能并非在所有情况下都有效。

Answer 2

根据您的评论：

Pause my code, manually change a checkbox and run the code to save (does save the manual change, but not the coded ones

问题似乎出在代码设置表单控件上，而不是代码单击保存按钮上。

这似乎是一个与 VBA 无关但与 knockout 行为有关的问题 - 请参阅 this SO post.相关评论是：

Your problem is that ko subscribes on the click event inside the checked binding:

post 中的提问者遇到了与您类似的问题 - 他们正在尝试选中一个复选框（以更改视图）但它没有更新视图模型或底层模型本身。 Knockout 是一个 MVVM 框架。

你的问题中的赠品是你的手动更改提交，因为你在浏览器中通过点击执行操作时执行了点击和更改，但你的编程方法只更改到表单控件，但不是先点击。

那么，如何通过 IE VBA 自动化解决这个问题？

基于我上面引用的 post 中的解决方案，加上方法 here 我将冒险将下面的代码作为可能的解决方案，但请注意它未经测试 ...

基本上您需要 'click' 在您想要更改的表单元素上 - 然后更新控件值。希望 'clicking' 位将意味着淘汰的视图模型根据 'change' 更新，并且从那里，模型数据将被写入数据库（或其他）：

您的复选框示例：

If InStr(ExtractedName, "NewPermit") > 0 Then
// hopefully this will get knockout to apply the required binding before your change the value
objElement.Click
objElement.Checked = True

您的下拉示例：

Set DropDown = objHTML.getElementById("ProjectFile-AccreditedCertifierId")
// hopefully this will get knockout to apply the required binding before your change the value
Dropdown.Click
DropDown.selectedIndex = 1

希望对您有所帮助 - 非常适合 3 管问题！祝你好运。

使用 Knockout 控制网页：未保存可见更改

Controls Webpage with Knockout: Visible changes not saved

javascript

excel

vba

dom-events

knockout.js