jQuery-replaceWith更新HTML不生成图像或链接

Question

我正在用JavaScript(使用jQuery和Knockout)和HTML编写一个小代码，它接受用户输入(GitHub用户名)，根据GitHub api检查输入是否有效，并显示用户的GitHub头像和用户名(链接到GitHub上匹配的配置文件)。该显示将替换用户输入用户名的表单。

用户输入之前的原始HTML是：

<div id="inputSection">
<form>
<p>
GitHub Username:
<input type="text" name="username" value="" placeholder="username" id="un"/>
<button type="button" id="submitButton">Login</button>
</p>
</form>
</div>

替换它的代码是：

$("#submitButton").click(function() {
var username = document.getElementById('un').value;
var inputForm = $(document.getElementById('inputSection'));
$.ajax( {
...
success: function () {
alert("Welcome, " + username);
var userURL = 'https://github.com/' + username;
var inputContent = $('<a data-bind="attr: {href: userURL}"><img data-bind="attr: {src: avatar_url}" height="30" width="30"/>' + username + '</a>');
$(inputForm.replaceWith(inputContent));
}
});
});

它似乎在很大程度上起作用。警报通过用户名欢迎用户后，表单将从网页中消失。它被用户名所取代，用户名的格式类似于链接。然而，它并不是一个整体。单击它不会有任何作用。此外，尽管在网页上显示了设置大小的框，用户的化身也不会出现。

解决方案可能非常简单和明显，但由于我本周才开始学习这些语言和库，我不确定出了什么问题。Knockout应该在调用JavaScript页面的HTML页面上运行，并且ajax与其他函数一起工作，所以我认为这很好。值"avatar_url"是ajax请求的api的一部分，位于https://api.github.com/users.

我试过各种各样的方法都没有效果。如果你想了解更多信息或有什么建议可以让这个问题变得更好，请发表评论。我是编码和堆栈溢出的新手，但我想让我的程序和问题都尽可能好。谢谢你抽出时间。

编辑：1。我最初未能设置图像的大小，导致图像为0x0。虽然图像本身仍然不显示，但这一点已经得到了纠正。2.当我第一次放入代码时，我试图通过排除一些变量被重命名为其他不相关部分的位置，并使所有名称在两个相关片段之间匹配，使代码更容易阅读。我没有全部抓到。他们现在应该都匹配了。

Answer 1

简短回答：

您正在插入一个具有数据绑定的html元素，而没有显式初始化其绑定。对DOM的新注入部分使用ko.applyBindings(vm, node)。

长答案：

如果您对编码以及jQuery和knockout都是新手，我建议您不要同时使用这两个库。原因如下：

如果你想使用淘汰，你必须坚持某种软件架构：

使用模型-视图-视图模型(MVVM)简化动态JavaScript UI(http://knockoutjs.com/)

jQuery更像是一个工具箱。它没有规定体系结构模式。

它使用一个易于使用的API，可以在多种浏览器中工作，使HTML文档遍历和操作、事件处理、动画和Ajax等功能更加简单。(https://jquery.com/)

这听起来可能有点蹩脚，并不是一个真正的答案，但我将向您展示"淘汰方式"one_answers"jQuery方式"解决问题之间的区别。我将从后者开始，因为它最接近您当前的方法：

jQuery方法(请注意，我将跳过Ajax部分)

找到使UI具有交互性所需的元素。将事件侦听器附加到按钮，在有新数据可用时修改DOM。

$(document).ready(function() {
// Notice that you don't need document.getElementById
var submitButton = $("#loginButton");
var userNameInput = $("#un");
var inputSection = $("#inputSection");
var getContentString = function(userName) {
var userUrl = "https://github.com/" + userName;
var avatarUrl = "...";
// Inject the user specific attributes
return "<a href=`" + userUrl + "`><img src=`" + avatarUrl + "` height='30' width='30'/>" + userName + "</a>";
};
var onSubmitClick = function(event) {
var userName = userNameInput.val();
var onSuccess = function() {
// Create new <a> element and replace the form with the new HTML
var inputContent = $(getContentString(userName));
inputSection.replaceWith(inputContent);
};
/* 
$.ajax({

success: onSuccess
});
*/
//Just call onSuccess to circumvent unimplemented ajax:
onSuccess();
};
submitButton.click(onSubmitClick);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="inputSection">
<p>
GitHub Username:
<input type="text" name="username" value="" placeholder="username" id="un" />
<button type="button" id="loginButton">Login</button>
</p>
</form>

淘汰方法

为用户创建视图模型。绑定输入并自动计算其他属性。通过数据绑定附加事件侦听器。使用if、visible或template绑定来交换UI的各个部分。

var UserViewModel = function() {
this.userName = ko.observable("");
this.confirmed = ko.observable(false);
this.userUrl = ko.computed(function() {
return "https://github.com/" + this.userName();
}, this);
this.avatarUrl = ko.computed(function() {
return "???" + this.userName();
}, this);
};
UserViewModel.prototype.confirm = function() {
/* ajax (disabled for example)
$.ajax({
success: this.confirmed.bind(null, true)
});
*/
this.confirmed(true);
};
var viewModel = {
user: new UserViewModel()
};
ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="with: user">
<!-- ko ifnot: confirmed -->
<form>
<p>
GitHub Username:
<input data-bind="value: userName" type="text" placeholder="username" />
<button data-bind="click: confirm">Login</button>
</p>
</form>
<!-- /ko -->
<!-- ko if: confirmed -->
<a data-bind="attr: { href: userUrl }">
<img data-bind="attr: {src: avatarUrl }" />
<span data-bind="text: userName"></span>
</a>
<!-- /ko -->
</div>

Answer 2

在上面user3297291的jQuery答案的帮助下，我最终得出了这个结论。答案是好的，对这一进展来说是必要的；有些部分不适用于这种情况(大多数是与本示例中未包含的其他代码的简单兼容性问题)。虽然这是一个非常具体的问题，但我认为应该包括解决方案。请注意，我已经决定暂时远离淘汰赛。

HTML建议将id附加到表单而不是div，这是一个不错的举措。

$("#submitButton").click(function inputForm() {
var username = $("#un").val();
function makeUserContent(user, profile, avatar) { //arguments are data from ajax
//writes a string without the messy quotes within quotes within quotes problem
//much clearer than trying to handle the jQuery and string all at once
return "<a href=" + profile + "><img src=" + avatar + " height='30' width='30' />" + user + "</a>";
}
function submitUsername() {
$.ajax({
...
success: function correntInformation(data) {
//data is what the ajax gets, which is passed for use
alert("Welcome, " + username + ".");
//calls to make the string with the data gotten by ajax
var inputContent = $(makeUserContent(data.login, data.html_url, data.avatar_url));
$("#inputSection").replaceWith(inputContent);
}
})
}
submitUsername();
})

我从这个问题中得到的最大好处是：简化字符串，保存和使用数据，一次使用一个库(直到同时使用这两个库)。